共计 1785 个字符，预计需要花费 5 分钟才能阅读完成。
记录一个前端项目优化的路程，效果如上图。
接下来我们在正文讲解具体优化步骤、思路以及优化前后对比，另外还有 /static 下文件被打包的解决方法。
PS：正文中图片模糊的话请右键“在新标签页打开图片”查看原图
原文首发于我的个人网站 lonhon.top，转载请注明出处。
WHY，为什么进行优化
本周在做的一个 vue 项目进入到测试阶段，在打包时候发现 build 耗时过长（近 3 分钟），觉得是有点异常，有过更复杂的项目但是耗时基本也在 1 分钟内，所以运行 npm run build –report 生成打包的矩阵树图（Treemap）来进行排查，report 截图如下：
发现项目中 Location 页面（用于数据可视化地理空间展示）的可视化功能所用到的几个国家 map 文件赫然出现在最前面，而项目打包后尺寸也达到了 8.76M。
另外，在进入该页面时发现页面加载耗时明显增加（1.js 有 6.77M），说明页面渲染被堵塞。
HOW，如何进行优化
第一步，优化静态资源
分析后得出结论：map 文件被打包到 1.js 中导致 build 和页面渲染时间增多。
接下来是优化思路：
map 文件基本不会动，所以可以压缩后放在 /static 中引入，减少 build 耗时
使用 defer 引入，解决页面渲染被堵塞的问题
static 踩坑
因为项目使用 vue-cli 工具，此前记得文档中说静态资源放在 /static 中会直接 copy 而不进行打包
把 map 文件直接移动到 /static 目录，还是会对这些文件进行打包，后面才想通：
资源放在 /static 不会被打包 ❌
不打包的资源放在 /static ✅
首先，/static 目录下的资源需要使用绝对路径进行引入，比如 img.src=”/static/xxx.png”；其次，如果在 vue 或 js 文件中使用 import 引入 /static 目录下的资源也是会被跟踪到然后一起打包的。
所以最终是在 index.html 文件中直接使用 script 标签引入 map 资源，并使用 defer 方式避免堵塞页面正常渲染
<script defer src=”/static/map1.js”/>
第一步优化结果
接下来看看优化效果：
可以看到现在打包后项目体积优化到 2M。
此外，实际 build 时间也从 3min 减少到 50s 左右，Location 页面渲染时间过长的问题也得到解决。
第二步，分离 echarts
虽然项目体积已经锐减，但是个人对 2M 这个数字还不够满意，可以看到现在图中 Treemap sizes 显示最大的文件是 vendor.js，vendor.js 里面放着项目的一些依赖模块如 vue、vue-route、axios、element-ui、echarts 等，同时也可以看到现在最大的模块是 echarts，所以接下来试着将 echarts 通过 cdn 的方式引入来达到减少项目体积的目的。
此处优化关键字：webpack externals，具体介绍见 webpack 文档。我们可以简单理解为从 cdn 加载第三方模块，从而减少服务器压力和项目体积。
在 /build/webpack.prod.conf.js 文件中添加 externals(vue-cli 版本不同会有差异)：
{
// other setting
externals: {
‘echarts’: ‘echarts’
}
}
在 index.html 中使用 script 标签从 cdn 引入 echarts
<script src=”https://lonhon.top/echarts/4.1.0/echarts.min.js”>
<div id=”app”></div>
因为主要是一个可视化项目，用到 echarts 页面较多，所以这里在 app 之前就引入了。
通过 externals 方式分离 echarts 或其它模块，不用修改 main.js 里面的逻辑。
注 1：也可以通过此种方式对其它模块如 element-ui 进行拆分
注 2：针对 echarts，也可以通过按需引入的方式达到优化效果。
第二步优化结果
再次运行 npm run build –report 查看项目打包情况：
可以看到项目体积已经优化到 1.26M，vendor.js 中也看不到 echarts 的踪影了。
结语
至此本文结束，实际开发中各个项目的主要优化点都各不相同，需要在开发过程中一一发掘。
本文主要想提供一些优化思路及手段，即如何定位（通过 build report，查看页面加载时间）问题，然后再解决这些问题。
