摘要：记录一个前端项目优化的路程，效果如上图。第二步优化结果再次运行查看项目打包情况可以看到项目体积已经优化到，中也看不到的踪影了。本文主要想提供一些优化思路及手段，即如何定位通过，查看页面加载时间问题，然后再解决这些问题。
记录一个前端项目优化的路程，效果如上图。
接下来我们在正文讲解具体优化步骤、思路以及优化前后对比，另外还有/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方式避免堵塞页面正常渲染
第一步优化结果接下来看看优化效果：
可以看到现在打包后项目体积优化到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
可以看到项目体积已经优化到1.26M，vendor.js中也看不到echarts的踪影了。
结语至此本文结束，实际开发中各个项目的主要优化点都各不相同，需要在开发过程中一一发掘。
本文主要想提供一些优化思路及手段，即如何定位（通过build report，查看页面加载时间）问题，然后再解决这些问题。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103357.html
摘要：记录一个前端项目优化的路程，效果如上图。第二步优化结果再次运行查看项目打包情况可以看到项目体积已经优化到，中也看不到的踪影了。本文主要想提供一些优化思路及手段，即如何定位通过，查看页面加载时间问题，然后再解决这些问题。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 记录一个前端项目优化的路程，效果如上图。 接下来我...
摘要：优化空间不大主要关注另外两个上面。目前为止，项目打包后的大部头就是，这个目前的优化空间较小。当然，从整体优化的大维度上来说优化的点还有很多，这个文章继续更新下去。 项目现状 项目是一个数据监测平台，引入了ehcart和three.js 负责项目的数据可视化；打包后，体积高达2.1M，这个体积相比于我的项目规模来说就显得稍有笨重了 使用webpack-bundle-analyzer分析了...
摘要：相当于可以编辑问卷并提供问卷展示，数据统计的这么一个平台。极大的节省了需要进行表单样式修改的时间，同时，让动态渲染表单成为一件可能且容易的事情。表单动态渲染刚好在项目之前，有过一次动态配置表单的尝试通过字段自动生成表单及验证。 近几天来了个紧急项目，想要做一个内部版本的问卷星。相当于可以编辑问卷并提供问卷展示，数据统计的这么一个平台。整个项目耗时不长，本着积淀和积累的原则，将过程中的...
摘要：写在最前本次分享一下在作者上一次失利即拿到毕业证第二天突然收到阿里社招面试通知失败之后，通过分析自己的定位与实际情况，做出的未来一到两年的规划。在博客有一定曝光度的积累中，陆续收到了一些面试邀请，基本上是阿里的但是我知道我菜。。 写在最前 本次分享一下在作者上一次失利即拿到毕业证第二天突然收到阿里社招面试通知失败之后，通过分析自己的定位与实际情况，做出的未来一到两年的规划。以及本次社招...
阅读 1758·2021-10-27 14:15
阅读 3769·2021-10-08 10:12
阅读 1137·2021-09-22 15:55
阅读 3209·2021-09-22 15:17
阅读 780·2021-09-02 15:40
阅读 1733·2019-08-29 18:33
阅读 1052·2019-08-29 15:22
阅读 2335·2019-08-29 11:08
