项目开发中，使用了很多依赖包，如 Vue 、路由管理 Vue-router 、状态管理 Vuex 、UI组件库( ElementUI 、 Vant )、图表（ echarts ）等。打包构建，发现有一些包体积过大，会影响首页加载速度。如下所示：
从上图的分析包中，可以将以下插件抽离：
需要删除的依赖包
VueCLI3自带了 webpack analzer ,可通过如下命令即可生成分析包内容，在 dist/report.html
更多请查看：
https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-serve
减少打包体积、加快打包速度，常规的优化有以下两种：
按需加载是通过只引用使用的组件来减少体积，这就会有一个问题：如果项目重度依赖第三方插件（如 ElementUI 、 vant ），那么此方案将无法减少打包的体积。
这里选择CDN的方式， 配置流程 ：
可根据环境变量，仅在线上采取使用CDN,开发环境直接使用npm依赖包即可。
进行包分离以后，打包结果：
vue.config.js 的pages为：
修改如下的地方：
外部扩展(externals)
使用webpack的externals来指定echarts无法减少包的大小
vue-cli利用webpack-bundle-analyzer分析构建产物