前言
之前在 为什么有人说 vite 快，有人却说 vite 慢？ 一文中，我们有提到开发模式下使用 Vite 会有首屏和懒加载性能下降的负面效果，并且在文章的结尾提到了可以通过持久化缓存、prefetch 的方式来做优化，那今天我们就来试一下其中的一种手段：通过 prefetch 优化懒加载性能。
本文的目录结果如下:
-
效果展示
-
为什么懒加载性能会差
-
通过 prefetch 初次优化懒加载性能
-
prefetch 二次优化
-
prefetch 三次优化
-
结束语
效果展示
我们先给大家展示一下没有做懒加载优化的效果和优化以后的效果:
-
webpack 的效果:
抛开
dev server的启动速度慢以外，懒加载的性能还是很不错的。 -
Vite 没有做懒加载优化的效果
使用
Vite以后，dev server启动速度飞起，但首屏性能、懒加载性能和Webpack相比还是有很明显的差距。 -
Vite 做懒加载优化的效果
优化以后的
Vite应用，尽管首屏性能还和以前一样，但是懒加载性能有了明显的提升。当我们打开客户管理页面时，页面会很快的完成渲染。
接下来小编就给大家具体讲一讲整个性能优化的过程。
为什么懒加载性能会差
首先我们先来解释一下为什么通过 Vite 启动 dev server 以后，懒加载性能会差(注意：性能差仅限于 dev server 启动以后首次打开应用的某一个页面)。
原因有两点：
-
大量的
http请求； -
dev server实时对浏览器请求的文件做transform；
由于 Vite 采取了 unbundle 机制，源文件并没有像 webpack 那样做合并捆绑，这就导致了不管是首屏还是懒加载，都会因为请求 js、css 等资源产生大量的 http 请求。另外，在请求过程中，dev server 需要对源文件做实时转换。其中，实时转换源文件是影响最大的。
这两种情形，和我们常用的优化手段如减少 http 请求、提前对源文件做处理背道而驰，也就导致了懒加载性能下降。
知道了性能下降的原因，那我们就可以针对性的做性能优化了。
http 请求数量多这个问题，影响较小，因此小编只重点关注源文件实时处理这个问题。解决方案也很简单，就是在用户点击某个页面之前，提前向 dev server 发起请求，让 dev server 提前去对请求文件做 transform,等到真正需要加载某个资源时，直接返回已经 transform 的资源。
这种手段也就是我们常说的 prefetch。
通过 prefetch 优化懒加载性能
提到 prefetch，大家第一想到的肯定是常用的 preload、prefetch、preconnect 优化策略。
// 用于提前获取首屏资源
<link ref="preload" href="xxxxx" as="script" />
// 用于提前获取非首屏资源
<link ref="prefetch" href="xxxx" as="script" />
// 用于提前建立 http 连接
<link ref="preconnect" href="xxx" />
由于需要优化懒加载性能，我们完全可以使用 prefetch 策略，在 html 文件中添加需要 prefetch 的资源，等到浏览器空闲的时候去提前加载资源，让 dev server 提前对请求文件做 transform。这样等切换到某个页面，真正需要获取相关资源时，可以快速 get。
有了方法，那我们就开始行动吧，