优化 Vue 项目编译文件大小

与其说是优化 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 由于没有按需加载，所以成为需要优化的另一个核心部分。