简介
vue-cli是一个非常好用的vue项目脚手架生成工具,当一个项目从开发环境上线到生产环境时,往往会遇到一些问题:为什么打包出来的文件有2Mb大?为什么页面上的资源加载非常缓慢?为什么有毫不相关的代码被打包到了同一个文件?本文主要针对vue-cli生成的项目,在打包过程中做一些优化。
本文发布时vue-cli的版本为v4。
按需加载路由
如果不做额外的配置,当打开项目的首页时,项目就会同时加载许多与当前页面无关的代码,这影响了我们的首页加载速度,按需加载的路由(懒加载)可以解决这个问题。我们让webpack自动识别,把不同的路由组件打包成分开的文件。
得益于vue-cli的封装,我们只需要这样写路由就可以实现按需加载的路由:
1 | const routes = [ |
异步组件
异步组件的原理跟按需加载路由类似,我们同样只需要以特定的方式书写代码:
1 | export default { |
分析工具
要解决打包文件过大的问题,先要分析出到底是什么原因导致了文件大,哪些地方可以减小打包大小。
vue-cli中内置了 webpack-bundle-analyzer
插件,默认情况下,我们修改 package.json
中的打包命令为 npm run build --report
即可查看可视化打包分析:
1 | { |
1 | $ npm run build |
执行命令后将会在 dist
目录中多生成一个 report.html
文件,把它在浏览器中打开,即可看到分析:
从图中可以看出,moment这个库占据了大量无用的空间。借助这个工具,我们可以分析是哪些文件占用了空间。
按需打包Moment.js
moment.js
占用空间大的原因在于,moment中包含了大量语言资源文件,我们并不需要这些。
通过webpack自身的功能即可在打包时丢弃这些无用的内容:
1 | // 在项目根目录新建 vue.config.js |
按需打包lodash
lodash
也是前端常用的一个工具库,有两种方案可以减小它的打包体积。
首先我们这么写代码,然后选择下面任意一种方法完成优化:
1 | import { cloneDeep } from 'lodash' |
使用lodash-es(推荐)
如果使用es模块,那么可以直接安装 lodash-es
:
1 | $ npm i lodash-es |
lodash-webpack-plugin插件
也可以使用 lodash-webpack-plugin
插件,自动移除没有用到的lodash代码:
注意:这个插件在使用
find
等方法时可能会删除一些必要的依赖,导致程序报错,解决方法是自己补全依赖,或者换用lodash-es
1 | // vue.config.js |
压缩代码
新版本的vue-cli是自动压缩代码的,所以不需要额外的配置。如果使用旧版cli生成项目,可以查询 terser 相关的用法。
uglifyify.js
已经停止维护了,不要再使用这个库
生成gzip文件
nginx可以帮助我们将资源自动压缩为gzip文件,如果我们在打包时能够提供一份压缩好的gzip文件的话,传输会更快。
这里使用 compression-webpack-plugin
插件:
1 | $ npm i -D compression-webpack-plugin |
编辑webpack配置:
1 | // vue.config.js |
注意:gzip还需要服务端支持,一般在nginx上做配置