本文共 2386 字，大约阅读时间需要 7 分钟。

对于前端页面来说，静态资源的加载对页面性能起着至关重要的作用。本文将介绍浏览器提供的两个资源指令——preload和prefetch，它们能够辅助浏览器优化资源加载的顺序和时机，提升页面性能。

一、从一个实例开始

我们开发了一个简单的收银台，支付过程中可以展开优惠券列表选择相应的券。从动图可以看到，列表第一次展开时，优惠券背景有一个逐渐显示的过程，体验上不是很好。

问题的原因也很明显：优惠券列表展开时需要加载图片，导致背景渐显的过程实际上是图片加载的过程；当网速慢的时候，这个问题会更加明显。

经过分析，我们发现问题的根源是背景图的加载时机太晚。如果能在优惠券列表渲染前加载好背景图，这个问题就不会出现。

对于这个问题，我们可以采取以下两个方案：

预加载方案

和我们之前方案相比，prefetch（预取）是一种更优的解决方案。prefetch是浏览器机制，利用浏览器空闲时间下载或预取用户在不久的将来可能访问的文档。网页向浏览器提供一组预取提示，并在浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中。当用户访问其中一个预取文档时，便可以快速从浏览器缓存中获取。

可以看到，在首屏的请求列表中已经出现了优惠券背景图ticket_bg.png的加载请求，但是请求本身看起来和普通请求没什么不同；展开优惠券列表后，network中增加了一次新的ticket_bg.png访问请求，这个请求的status虽然也是200，但有一个特殊的标记——prefetch cache，表明这次请求的资源来自prefetch缓存。

预加载

除了prefetch，还有一个相似的预加载方式——preload（预加载）。preload也属于资源提示，用于辅助浏览器优化资源加载。preload用于声明当前页面的关键资源，强制浏览器提前加载。

我们对比了使用preload前后的页面首次加载效果。再次查看页面字体加载效果：

字体文件的最大问题是它们的加载时机太迟。当CSS解析到字体文件时，浏览器只能使用降级字体，造成了Flash of Unstyled Text（FOUT）现象。在网络情况较差时，这个问题会更加明显。

我们在入口HTML文件的head部分加入preload标签：

这样可以确保字体文件在页面首次加载后很快被浏览器加载，避免了FOUT现象的发生。

preload 和 Prefetch 的具体实践

1. preload-webpack-plugin

对于项目开发，我们可以使用preload-webpack-plugin来自动化处理preload标签的插入。通过webpack插件可以在构建过程中提前注入preload标签，并指定资源类型和路径。

const PreloadWebpackPlugin = require('preload-webpack-plugin');// 在`webpack`配置中：plugins: [  new PreloadWebpackPlugin({    rel: 'preload',    as(entry) {      if (/\.css$/test(entry)) return 'style';      if (/\.woff$/test(entry)) return 'font';      if (/\.png$/test(entry)) return 'image';      return 'script';    },    include: 'allAssets',    fileBlacklist: [/\.svg$/],  })]

这里的include属性设为'allAssets'，表示所有类型的资源都会被预加载。常见的用途是加载字体文件、图片和脚本等。

2. 使用场景

• - preload适用于首屏必需的资源，如字体文件、图表模块等无需动态加载的资源。
• prefetch适用于不直接加载的资源，如异步加载的模块、需要显式缓存的资源。

3. 最佳实践

Vue CLI 3 的默认配置

默认情况下，Vue CLI应用会自动生成preload和prefetch提示。这些提示由@vue/preload-webpack-plugin和@vue/prefetch-webpack-plugin负责处理。你可以通过chainWebpack的配置来对这些预加载规则进行修改或删除。

• preload默认处理所有需要提前加载的资源（如字体文件、图表等）。
• prefetch默认处理所有异步加载的资源（如动态导入的模块）。

总结和踩坑

转载地址：http://nqlkk.baihongyu.com/