查看: 190|回复: 0

[JavaScript/JQuery] vue项目总结(一)

发表于 6 天前
Vue 独立构建 & 运行时构建

-- KChris 2017.3.13 (=^.^=)

目的:优化项目中文件的体积。

1.config/index.js

  1. npm install --save-dev compression-webpack-plugin
  2. productionGzip: true
  3. //Gzip off by default as many popular static hosts
  4. //such as Surge or Netlify already gzip all static assets for you.
复制代码

2.查看编译后各文件体积大小等信息

1)直接用 npm 命令:

  1. npm run build --report
复制代码

2)用 webpack 命令:

  1. webpack --config build/webpack.dev.conf.js
  2. webpack --config builg/webpack.dev.conf.js \ --profile --json => stats.json
复制代码

结合:http://alexkuz.github.io/webp... 或者 http://webpack.github.io/anal... 上传 json 文件生成图表

Note: 不要小看这个步骤,这对于你优化项目文件的体积非常重要,它会引导你从哪些文件入手进行你的优化。从这里,我发现 vue.common.js 这个文件占了我很大的内存空间,于是,我才会在 Google 上搜索这个文件,然后发现 vue2.x 中,它的编译分独立构建和运行构建,再一步步地慢慢找到下面步骤的。

3.Vue 项目本身入手,改独立编译为运行时编译

1)build/webpack.base.conf.js

  1. alis: {
  2. 'vue$': 'vue/dist/vue.runtime.common.js'
  3. }
  4. // change vue.common.js to vue.runtime.common.js
复制代码

2) 去掉项目中的 template 选项,改为 render 选项。

  1. new Vue({
  2. render: function(h) {
  3. return h('App')
  4. }
  5. })
  6. // remove template options: template: '<App/>'
复制代码

ok,在这里我们就将 vue 的独立构建改成运行时构建了。这时,我们再 npm run build,会发现,文件体积确实变小了很多,也没有了之前的 warning 提示。因为在我的项目里主要是 vue.common.js 这个文件占据了比较大的空间而导致终端有 warning 提示文件太大,所以,改成运行时编译对于我来说,基本上就解决问题了。



回复

使用道具 举报