了解预测性预提取以及 Guess.js 如何实现预测性预提取。
在 2019 年 Google I/O 大会上，我在利用预测性预提取加快 Web 导航速度会议中首先介绍了如何使用代码分块优化 Web 应用，以及对后续网页导航的潜在性能影响。在演讲的第二部分，我介绍了如何使用 Guess.js 设置预测性预提取来提高导航速度：
代码分块，加快 Web 应用的运行速度
Web 应用运行缓慢，JavaScript 是您分发的资源中最昂贵的资源之一。等待加载速度缓慢的 Web 应用可能会让用户感到沮丧，并降低转化率。
延迟加载是一种有效的技术，可减少通过网络传输的 JavaScript 字节数。您可以使用多种方法延迟加载 JavaScript，包括：
- 组件级代码拆分
- 路径级代码拆分
借助组件级代码拆分，您可以将各个组件移至单独的 JavaScript 分块中。在特定事件中，您可以加载相关脚本并渲染组件。
不过，使用路由级代码拆分时，您可以将整个路由移至独立的代码块中。当用户从一个路由转换到另一个路由时，他们必须下载关联的 JavaScript 并引导所请求的网页。这些操作可能会导致严重延迟，尤其是在网络速度较慢的情况下。
预提取 JavaScript
借助预提取功能，浏览器可以下载并缓存用户可能很快就需要的资源。常用的方法是使用 <link rel="prefetch">，但存在两个常见的陷阱：
- 预提取资源过多（过度提取）会消耗大量数据。
- 用户需要的某些资源可能永远不会预提取。
预测性预提取通过使用用户导航模式报告来确定要预提取的资源，从而解决这些问题。
使用 Guess.js 进行预测性预加载
Guess.js 是一个 JavaScript 库，提供预测性预提取功能。Guess.js 会使用 Google Analytics 或其他分析服务提供商提供的报告来构建预测模型，以便智能地预加载用户可能需要的内容。
Guess.js 已与 Angular、Next.js、Nuxt.js 和 Gatsby 集成。如需在应用中使用该代码，请将以下代码行添加到 webpack 配置中，以指定 Google Analytics 视图 ID：
const { GuessPlugin } = require('guess-webpack');
// ...
plugins: [
// ...
new GuessPlugin({ GA: 'XXXXXX' })
]
// ...
如果您不使用 Google Analytics，则可以指定 reportProvider，并从您喜爱的服务中下载数据。
与框架集成
如需详细了解如何将 Guess.js 与您喜爱的框架集成，请参阅以下资源：
如需快速了解与 Angular 的集成，请观看以下视频：
Guess.js 如何运作？
下面是 Guess.js 实现预测性预提取的方式：
- 它首先会从您偏好的分析服务提供商那里提取用户导航模式的数据。
- 然后，它会将报告中的网址映射到 webpack 生成的 JavaScript 分块。
- 它会根据提取的数据创建一个简单的预测模型，以预测用户从任何给定网页跳转到的网页。
- 它会针对每个 JavaScript 分块调用模型，预测接下来可能需要的其他分块。
- 它会向每个分块添加预取指令。
Guess.js 完成后，每个分块都将包含类似以下内容的预加载指令：
__GUESS__.p(
['a.js', 0.2],
['b.js', 0.8]
)
这段由 Guess.js 生成的代码会告知浏览器考虑以概率 0.2 预提取分块 a.js，并以概率 0.8 预提取分块 b.js。
浏览器执行代码后，Guess.js 会检查用户的连接速度。如果足够，Guess.js 会在网页的标头中插入两个 <link rel="prefetch"> 标记，每个分块一个。如果用户使用的是高速网络，Guess.js 会预加载这两个分块。如果用户的网络连接不佳，Guess.js 只会预加载分块 b.js，因为该分块很有可能被需要。
了解详情
如需详细了解 Guess.js，请参阅以下资源：