Prefetch (<link rel="prefetch">) 是一种浏览器优化，它允许我们在需要之前获取后续路由或页面可能需要的资源。
预取可以通过几种方式实现。
它可以在 HTML 中声明性地完成（例如在下面的示例中），
通过 HTTP 标头（链接：</js/chat-widget.js>; rel=prefetch），
Service Workers 或通过更多自定义方式，例如通过 Webpack .
<link rel="prefetch" href="/pages/next-page.html">
<link rel="prefetch" href="/js/emoji-picker.js">
Prefetch 预取
在展示如何根据可见性或交互导入模块的示例中，
我们看到在单击按钮以切换组件与在屏幕上显示实际组件之间通常存在一些延迟。
发生了这种情况，因为当用户单击按钮时，模块仍然需要被请求和加载！
在许多情况下，我们知道用户会在页面初始呈现后不久请求某些资源。
尽管它们可能不会立即可见，因此不应包含在初始包中，但尽可能减少加载时间以提供更好的用户体验会很棒！
可能在应用程序中的某个时刻使用的组件或资源可以被预取。
可以通过在 import 语句中添加一个神奇的注释来让 Webpack 知道某些包需要预取：/* webpackPrefetch: true */。
const EmojiPicker = import(/* webpackPrefetch: true */ "./EmojiPicker");
构建应用程序后，可以看到 EmojiPicker 将被预取。
Asset Size Chunks Chunk Names
emoji-picker.bundle.js 1.49 KiB emoji-picker [emitted] emoji-picker
vendors~emoji-picker.bundle.js 171 KiB vendors~emoji-picker [emitted] vendors~emoji-picker
main.bundle.js 1.34 MiB main [emitted] main
Entrypoint main = main.bundle.js
(prefetch: vendors~emoji-picker.bundle.js emoji-picker.bundle.js)
实际输出作为链接标签可见，在文档头部带有 rel="prefetch"。
<link rel="prefetch" href="emoji-picker.bundle.js" as="script" />
<link rel="prefetch" href="vendors~emoji-picker.bundle.js" as="script" />
甚至在用户请求资源之前，浏览器就会请求和加载预取的模块。
当浏览器空闲并计算出它有足够的带宽时，它会发出请求以加载资源，并缓存它。
缓存资源可以显着减少加载时间，因为不必在用户单击按钮后等待请求完成。 它可以简单地从缓存中获取加载的资源。
尽管预取是优化加载时间的好方法，但不要过度使用。
如果用户最终从未请求过 EmojiPicker 组件，就不必要地加载了资源。
这可能会花费用户资金，或减慢应用程序的速度。 只预取必要的资源。
您可能会发现以下有关预取的资源很有帮助：
知识点
- webpack