与其说是优化 Vue,不如说主要是在 webpack 打包的配置中做些文章,使得 Vue 编译后的文件尽可能的小。以下介绍自己在项目中进行优化的过程,其中的内容也许并不适合于每个项目,但整体思路是差不多的。
定位问题
要想进行优化,首先我们得清楚问题所在。即:是哪些代码/依赖包导致最后的编译文件过大?
这里,我们需要使用 webpack-bundle-analyzer
工具。修改 package.json
文件,添加:
"analyze": "NODE_ENV=production npm_config_report=true npm run build"
然后执行:
npm run analyze
便会在浏览器中打开一个页面,展示编译后的文件大小及各部分内容大小。以下是项目在优化前的分析结果:
从图中可以看出,最后编译出的 vendor.js
文件达到了 5MB,其中主要来自 echarts
。此外,由于 element-ui
在使用时已经注意到按需加载组件,所以可优化的部分不多;而 lodash
由于没有按需加载,所以成为需要优化的另一个核心部分。