了解预测性预提取以及 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，请查看以下资源：