prefetch 和 preload 及 webpack 的相关处理

使用预取和预加载是网站性能和用户体验提升的一个很好的途径，本文介绍了使用 prefetch 和 prefetch 进行预取和预加载的方法，并使用 webpack 进行实现

<link> 标签的 rel 属性可以定义链接类型，与 href 配合使用可以预取或预加载对应资源，prefetch 是其中的一种链接类型

1
<link rel="prefetch" herf="URL">

preload 是另外一种类型，同样用 href 定义资源地址，但其处理预取外，还会对资源进行解析，所以还要增加属性 as，说明资源的类型

1
<link rel="preload" href="URL" as="MIME_TYPE">

预取资源

prefetch 表示用户在接下来的浏览中（例如在下一个页面），有可能用到对应资源，提示浏览器要在闲时获取对应资源

先新建文件夹 prefetch-preload-demo（本文所有代码将在此创建），安装相关依赖，并新建文件夹 static

mkdir prefetch-preload-demo
cd prefetch-preload-demo
npm init -y
npm i -D http-server
mkdir static

在 static 中创建 prefetch.html， main.js 和 script.js

prefetch.html 定义了一个 rel 为 prefetch 的链接

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<title>Prefetch</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="prefetch" href="script.js">
</head>
<body>
<script src="main.js"></script>
</body>
</html>

main.js 创建了一个按钮，并绑定了点击事件

1
2
3
4
5
6
7
8
let button = document.createElement('button');
button.innerHTML = 'Add Script';
button.addEventListener('click', e => {
  let script = document.createElement("script");
  script.src = "script.js";
  document.head.appendChild(script);
});
document.body.appendChild(button);

script.js 只是简单的打印了一下

1
console.log('script run');

运行服务器（也可在 package.json 中增加 server 脚本）

npx http-server

访问 http://localhost:8080 并导航至 static 中，点击 prefetch.html，或者直接访问线上页面，初始状态下，查看控制台的网络选项卡下的内容如下（不要勾选 Disable Cache，点击右侧齿轮，勾选 Use large request rows）

  • script.js 被 fetch 下来，size 列的两个数字，275 B 表示下载的字节大小，0 B 表示解析的字节大小（即目前并没有解析）
  • 控制台是空的，即脚本没有运行

点击页面上的 Add Script，会在页面增加地址为 script.js 的 <script> 标签，此时网络选项卡会增加以下内容

  • 下载字节量为 (prefetch cache) ，即直接从预取缓存获取资源，下面的解析后的字节不再为 0
  • 控制台打印出脚本中的调试内容，即这时脚本才被解析并运行

预加载资源

preload 表示用户在当前的浏览中（往往是在当前页面），极有可以可能用到对应资源，提示浏览器要优先获取对应资源

将 prefetch.html 的 link 标签的 prefetch 改为 preload，并增加资源类型 as 为 script，即得 preload.html

1
<link rel="preload" href="script.js" as="script">

访问本地服务器对应的 prefetch.html，或者直接访问线上页面，初始状态下，查看控制台的网络选项卡下的内容如下

  • script.js 被优先下载， size 列的解压字节不再为 0，即 preload 除了把脚本下载了下来，还进行了解析
  • 控制台目前仍为空，即脚本虽然被解析，但并没有运行

点击 Add Script，网络选项卡并没有增加任何记录，但是控制台输出了脚本的打印内容

  • 因为脚本已经解析完成，所以连从缓存获取都不需要了，直接运行即可
  • 如果没有在 3 秒内点击 Add Script，控制台会进行警告，因为没有及时使用应该优先加载的资源

    The resource https://chanvinxiao.com/demo/html/script.js was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

webpack 的相关处理

运行以下命令安装相关依赖，并新建文件夹 src

npm i -D webpack webpack-cli html-webpack-plugin preload-webpack-plugin@3.0.0-beta.4
mkdir src

  • PreloadWebpackPlugin 的当前版本 2.x 与 webpack 当前版本 4.x 不兼容，所以需要指定版本号为最新的 3.x beta

将 main.js 与 script.js 复制到 src 中，并将 main.js 的点击事件处理更新为

1
2
3
button.addEventListener('click', e => {
  import(/* webpackChunkName: "script" */ './script.js');
});
  • import() 为动态加载脚本，webpack 会生成类似以上动态创建 script 标签的代码
  • import 里的注释为特殊含义的魔法注释，如果不设置 webpackChunkName，加载的脚本将被按数字次序命名

增加 webpack.config.js 如下

1
2
3
4
5
6
7
8
9
10
11
12
const HtmlWebpackPlugin = require('html-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'preload.html'
    }),
    new PreloadWebpackPlugin()
  ]
}
  • HtmlWebpackPlugin 将自动生成相应的 html 文件，默认为 index.html，这里通过设置 filename 选项更改
  • PreloadWebpackPlugin 为 HtmlWebpackPlugin 的插件，默认为其动态加载资源增加链接类型为 preload 的 link 标签，其 as 的值可根据后缀自动判断

PreloadWebpackPlugin 也支持 prefetch，需要增加 rel 选项为 prefetch

1
2
3
4
5
6
new HtmlWebpackPlugin({
  filename: 'prefetch.html'
}),
new PreloadWebpackPlugin({
  rel: 'prefetch'
})

不过要同时生成 preload.html 和 prefetch.html，需要在对应的 PreloadWebpackPlugin 中设置 excludeHtmlNames 排除对方，否则会同时产生 preload 和 prefetch 的 link 标签

1
2
3
4
5
6
7
8
9
10
11
12
13
new HtmlWebpackPlugin({
  filename: 'preload.html'
}),
new HtmlWebpackPlugin({
  filename: 'prefetch.html'
}),
new PreloadWebpackPlugin({
  excludeHtmlNames: ['prefetch.html']
}),
new PreloadWebpackPlugin({
  rel: 'prefetch',
  excludeHtmlNames: ['preload.html']
})

构建文件（也可在 package.json 中增加 build 脚本）

npx webpack

dist 文件夹中将生成 prefetch.html 和 preload.html，访问本地服务器对应地址，即可得到与以上静态页面同样的效果

总结

此文使用静态页面和 webpack 打包两种方式演示了预取和预加载的实现，完整代码见 GitHub，主要技术点如下：

  • ELEMENT.appendChild 动态创建脚本
  • import() 动态加载脚本并设置魔法注释
  • html-webpack-plugin 及其插件的配置