Vue 独立构建 & 运行时构建
— KChris 2017.3.13 (=^.^=)
目的:优化项目中文件的体积。
1.config/index.js
npm install --save-dev compression-webpack-plugin
productionGzip: true
//Gzip off by default as many popular static hosts
//such as Surge or Netlify already gzip all static assets for you.
2.查看编译后各文件体积大小等信息
1)直接用 npm 命令:
npm run build --report
2)用 webpack 命令:
webpack --config build/webpack.dev.conf.js
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
alis: {
'vue$': 'vue/dist/vue.runtime.common.js'
}
// change vue.common.js to vue.runtime.common.js
2) 去掉项目中的 template 选项,改为 render 选项。
new Vue({
render: function(h) {
return h('App')
}
})
// remove template options: template: '<App/>'
ok,在这里我们就将 vue 的独立构建改成运行时构建了。这时,我们再 npm run build,会发现,文件体积确实变小了很多,也没有了之前的 warning 提示。因为在我的项目里主要是 vue.common.js 这个文件占据了比较大的空间而导致终端有 warning 提示文件太大,所以,改成运行时编译对于我来说,基本上就解决问题了。