vue-cli 打包优化
1. 优化打包体积
先上2个图
(上图A是优化前的各个js大小对比视图,下图B是优化后,还未完全优化完成的,不过也可以看得出来对比)
图A是3个压缩文件,包括部分图片和使用的所有js,体积都偏大
图B是每个页面都区分了,以及一些大的js块都拆开了的,每个页面打开时均按需加载,而不是一次加载全部,这样就省了不必要的js加载,消耗流量;
1.1 首先vue-cli在初始化时已经预装了插件webpack-bundle-analyzer ,此插件就是打包隔离分析js,只需运行:npm run build --report
这个是执行分析并在浏览器中生成展示,图A就是未处理的,可看到只有3个大的JS,而且每个页面都会获取(因为页面跳转采用的是window.location.href
,这种方式会重新渲染页面,而不是走vue的路由,而导致这个原因是app内嵌跳转无法监测拦截,所以才使用window.locaiton.href
) ,这样将会导致页面加载变慢;
1.2 拆页面,在router.js中把所有的import引用的页面均改成动态import()这种引用形式,这样就会把每个页面所需的vue页面,css,js隔离分开按需加载 ,不至于一次加载全部导致页面变慢,然后拆第三方js,我们可以把第三方js拆出来,使用cdn引用,这里我使用的是bootCDN ,列举里边两个比较特殊的:
1.2.1 pdf.js 这个插件,直接占图A的一块了,太大了,我就直接干掉引用链接了,然而使用的时候出现了问题,PDFJS.getDocument
这个找不到了,是PDFJS这个引用名找不到了,在网上没收到,然后想到了是不是换了个名,在debugger时直接使用window.查出来了一个pdfjsLib
,改名后调试果然通过,原来PDFJS
换成了pdfjsLib
1.2.2 jquery这个插件,引用时需要去掉build/webpack.base.conf.js
中的$、jquery(我这里也引用了moment,所以也去掉了)
...
new webpack.ProvidePlugin({
// $: "jquery",
// jQuery: "jquery",
// moment:"moment"
})
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
// jquery: "jquery",
// moment:"moment"
}
}
...
然后在package.json
内部加上一段过滤的设定
...
"externals": {
"jQuery": "jquery",
"moment": "moment"
},
...
1.3 至于其他的内置cityData.js
和city.js
实在没办法,单独打包也很大,除非自己做一个cdn,这里没有条件也就没有处理了
1.4 最后这个月27号,定了下需要调用接口提供了,也就省了这两个大的js了,更加灵活的按需引用
2. 让浏览器选择gzip
2.1 gzip可以让浏览器选择加载.gz的文件进行浏览器端解压使用对应的文件,让请求的数据包更小 ,也是先上2个图
(上图C为普通打包,下图D为gzip压缩)
由以上的图C和图D可看到,就取3.js看,分别是67.1kb,14.1kb,77.9%的压缩率,不过gzip的运用需要浏览器的支持的,IE不支持,不过用到了移动端就不考虑IE了;
至于使用,其实vue-cli也是有配置的,不过对应的组件并没有加进去,但是配置地方已经有了,打开build/index.js
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css'],
注释说的很明白,如果需要开通gzip,需要引用compression-webpack-plugin
,那么我们按照提示执行:npm install --save-dev compression-webpack-plugin
,不过可能又出问题了,打包报错,提示说没找到对应的方法,查了下原因,compression-webpack-plugin
的新版本已经改了配置方式,这里看网友说需要修改assets换成filename,可以搜下,但是不起作用,我就直接重新安装了1.x版本的进去了,终于好了