webpack性能优化—— prefetch & preload

webpack 按需加载可以将初始化页面不需要用到的逻辑代码拆分出来,实现动态的加载,可以优化首屏的加载体验,但是如果按需加载的模块比较大的话,加载的过程也是比较耗时的,有时候甚至需要用进度器告知用户正在 loading ,这个体验不是很好,为了优化加载体验,我们可以借助prefetch/preload技术

prefetch

1
<link rel="prefetch" ></link>

这段代码告诉浏览器加载下一页面可能会用到的资源,利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了

在webpack,可以利用import的webpackPrefetch属性

1
2
3
4
//异步组件加载
import(/* webpackPrefetch: true */"./components/async/index").then(defaults => {
console.log(defaults)
})

通过 chrome 的调试工具,可以看到第二次请求js资源,会非常快,因为直接拿的是缓存的内容。

image

preload

1
<link rel="preload" ></link>

preload 告诉浏览器这是一种在这次导航中必须的资源,只是会在之后才会被使用, chrome甚至会在资源加载后3秒没有被使用时打印一个警告

preload通常用于本页面要用到的关键资源,包括关键js、字体、css文件。preload将会把资源得下载顺序权重提高,使得关键数据提前下载好,优化页面打开速度。

webpack 中利用 import 的 webpackPreload属性可以实现 preload

1
2
3
import(/* webpackPreload: true */"./components/async/index").then(defaults => {
console.log(defaults)
})

与 prefetch 指令相比,preload 指令有许多不同之处:

  • preload chunk 会在父 chunk 加载时,以并行方式开始加载。prefetch chunk 会在父 chunk 加载结束后开始加载。
  • preload chunk 具有中等优先级,并立即下载。prefetch chunk 在浏览器闲置时下载。
  • preload chunk 会在父 chunk 中立即请求,用于当下时刻。prefetch chunk 会用于未来的某个时刻。
  • 浏览器支持程度不同。

注意,不正确地使用 webpackPreload 会有损性能,不是当前页面用到的资源不要使用 preload

为什么Prefetch/Preload有用?

Preload用于更早地发现资源并避免发起类似瀑布一样的请求。 它可以将页面加载降低到2次往返(1. HTML,2。所有其他资源)。 使用它不会花费额外的带宽。

prefetch用于使用浏览器的空闲时间来加速将来的导航。 当用户未执行预期的未来导航时,使用它可能会花费额外的带宽。