VUE项目性能优化实践——通过懒加载提升页面响应速度

最近我司因业务需求，需要在一个内部数据分析平台集成在线 Excel 功能，既然我们自己就是做开发工具的，所以目光自然就落在了我司自研的前端表格产品上。

项目的目的是要通过数据透视表和 Excel 公式来分析公司的各项运营数据。不过在集成后，在开发环境页面运行流畅，大量数据加载处理也很快。但是发布生产后，在用户每次打开页面时，加载时间上相较开发阶段均有所降低，经过排查速度变慢是由于发布包的 vendor.js 变大所导致的，这个文件加载每次都需 300 毫秒左右，由于小的 Vue 项目并没有做模块划分，所以所有的代码都直接打包到了 vendor 中，在集成了新功能后，发布包也随之变大了。

既然找到了原因，我们就开始着手优化，在前端对于需加载较大资源时，我们一般都采用懒加载的方式来优化效率。

什么是懒加载？

懒加载也叫做延时加载，在网页响应时不立刻请求资源，待页面加载完毕或者按需响应时再加载资源，以达到提高页面响应速度以及节省服务器资源的谜底。网页中常用的懒加载是图片的懒加载，对于类似淘宝一样的多图页面，如果等待所有图片都下载完成再响应用不必然造成页面加载的卡顿。对于 JS 资源的加载也是同样的道理，大 JS 的加载会造成 JS 阻塞，页面出现停止响应的假死状态。因此可以通过按需加载的方式，提高页面首屏的加载速度。

总结了具体优化步骤，下面我们就开始着手优化吧！

开始优化

首先是项目环境：Vue 2.6

开发环境：Vue-cli 4.5 + TypeScript 3.9

划分业务模块

通过路由异步加载模块，加速首屏以及其他页面加载速度，在 Vue Router 中将 webExcel 模块配置为懒加载模式，配置后 webExcel 组件会按照指定的 webpackChunkName 打包为单独的文件，并在访问 webExcel 路由的时候才会加载。这样访问 home 以及 about 页面时并不会加载 webExcel 资源。

懒加载路由配置

打包发布访问页面，首屏秒开，直接访问 about 依旧秒开。可是查看网络请求时候发现访问首页时请求了 about 和 web Excel 的资源。经过排查发现 vue-cli 在页面中使用了 preload 和 prefetch 预加载机制，在不影响当前页面加载的情况下预加载后续页面需要的资源提升用户体验，这里为了演示清晰注释掉 prefetch 的资源。