VUE移动端项目打包优化整理

版本：vue2.0+ 构建工具 vue-cli 打包工具webpack

一、项目构建完成，首次打包后发现打包过程很慢，查看生成的文件中有一个map文件，其功能主要是用于测试，取消生成map文件，找到config/index.js，箭头所指的地方修改成false便可

二、打包后首屏加载速度慢，加载的资源中vendor.js过大，是由于引用的第三方库过多致使，能够把其中vue vuex vue-router 以及axios分离出来采用cdn加载，在index.html中引入

而后找到build/webpack.base.conf.js，在module.exports中添加如下代码

而后还需查看router中各组件的加载方式是不是按需加载，统一改成如下方式

再次打包后，会发现生成了不少1.xxx.js, 2.xxx.js等，而后 vendor文件也比最初小了不少

三、时间久了以后，项目需求增多，致使项目体积变大，这时能够考虑开启GZIP压缩，找到config/index.js中，修改如下配置

而后在build/webpack.prod.conf.js中找到如下代码修改

而后再次打包，可能会报错TypeError: Cannot read property 'emit' of undefined

这时候须要先卸载以前的compression-webpack-plugin

安装1.12版本的compression-webpack-plugin

卸载命令：npm uninstall --save-dev compression-webpack-plugin

安装1.12命令：npm install --save-dev compression-webpack-plugin@1.1.2

再次运行后打包正常

四、打包后只会生成一个app.css，若是体积过大，而且各组件多使用了scoped样式，则在build/webpack.prod.conf.js中可配置，禁止合并到打包后的app.css，找到allChunks，修改成false,以下：

五、最后打包时，webpack会默认将10K如下的图片转化为base64，若是项目中的图片过多（base64过多，也会致使文件过大,考虑到首屏速度），能够考虑修改如下的数值（build/webpack.case.conf.js），单位为b，而后在合适的地方采用懒加载的方式加载图片