记一次Vue项目优化和思路

记录一次前端项目优化之旅，效果如上图。下面我们将以文字的方式说明具体的优化步骤、思路和优化前后的对比，另外还有针对/static下文件打包的解决方案。PS：如果文中图片模糊，请右击“在新标签页中打开图片”查看原图为什么，为什么要优化？这周我在做的一个Vue项目进入了测试阶段。打包的时候发现构建时间太长了（将近3分钟）。在1分钟内，运行npmrunbuild--report生成打包的树状图（Treemap）用于故障排除。报告截图如下：发现项目中的位置页面（用于数据可视化和地理空间展示）。最前面出现一个国家地图文件，打包后工程大小达到了8.76M。另外，进入页面发现页面加载时间明显增加（1.js有6.77M），说明页面渲染受阻。HOW，如何优化第一步，经过优化静态资源分析，得出结论是将map文件打包成1.js，导致构建和页面渲染时间增加。接下来是优化思路：map文件基本不会动，所以可以压缩导入到/static中，减少构建耗时，使用defer解决页面渲染被阻塞的问题。记得文档上说放在/static下的静态资源会直接复制过来，不打包。如果直接将map文件移动到/static目录下，这些文件还是会被打包。后来想通了：放在/static里的资源是不会打包的。打包?解压后的资源放在/static?首先需要使用绝对路径导入/static目录下的资源，比如img.src="/static/xxx.png";其次，如果在vue或者js文件中使用到/static目录下导入的资源，也会被一起跟踪打包。所以最后直接在index.html文件中使用script标签导入地图资源，并使用defer方式避免阻塞页面的正常渲染。第一步优化结果来看看优化效果：可以看到打包后项目大小优化为2M。此外，实际构建时间也从3分钟缩短到50秒左右，Location页面渲染时间过长的问题也得到了解决。第二步，分离echarts。虽然项目体积大幅缩减，但我对2M这个数字并不满意。可以看到图中Treemapsizes中最大的文件是vendor.js，vendor.js包含了项目的一些依赖。vue、vue-route、axios、element-ui、echarts等模块。同时大家也可以看到最大的模块是echarts，所以尽量通过CDN引入echarts，减少项目体积。这里优化的关键字：webpackexternals，详见webpack文档。我们可以简单理解为从CDN加载第三方模块，从而降低服务器压力和项目体积。在/build/webpack.prod.conf.js文件中添加externals（vue-cli版本会不同）：{//othersettingexternals:{'echarts':'echarts'}}在index.html中使用script标签是从cdn导入到echarts