Back to Details

prefetch

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Prefetch

Prefetch

Prefetch (
<link rel="prefetch">
) is a browser optimization which allows us to fetch resources that may be needed for subsequent routes or pages before they are needed. Prefetching can be achieved in a few ways. It can be done declaratively in HTML (such as in the example below), via a HTTP Header (
Link: </js/chat-widget.js>; rel=prefetch
), Service Workers or via more custom means such as through Webpack.
Prefetch（
<link rel="prefetch">
）是一种浏览器优化技术，允许我们在后续路由或页面需要资源之前就获取它们。预获取可以通过几种方式实现：可以在HTML中声明式地完成（如下方示例）、通过HTTP Header（
Link: </js/chat-widget.js>; rel=prefetch
）、Service Workers，或者通过更自定义的方式，比如Webpack。

When to Use

适用场景

  • Use this when you know users will likely navigate to certain routes or need certain resources soon
  • This is helpful for reducing perceived loading time on subsequent navigations
  • 当你确定用户很可能会导航到某些路由或很快需要某些资源时使用
  • 这有助于减少后续导航时的感知加载时间

Instructions

操作指南

  • Use 
    <link rel="prefetch">
    or Webpack magic comments (
    /* webpackPrefetch: true */
    ) to prefetch resources
  • Only prefetch resources that are likely to be needed — don't overdo it as it consumes bandwidth
  • Prefetched resources are loaded at low priority when the browser is idle
  • 使用
    <link rel="prefetch">
    或Webpack魔法注释（
    /* webpackPrefetch: true */
    ）来预获取资源
  • 仅预获取很可能会被用到的资源——不要过度使用，因为这会消耗带宽
  • 预获取的资源会在浏览器空闲时以低优先级加载

Details

详细说明

html
<link rel="prefetch" href="/pages/next-page.html" />
<link rel="prefetch" href="/js/emoji-picker.js" />
html
<link rel="prefetch" href="/pages/next-page.html" />
<link rel="prefetch" href="/js/emoji-picker.js" />

Prefetch

Prefetch

In the examples showing how we can import modules based on visibility or interaction, we saw that there was often some delay between clicking on the button in order to toggle the component, and showing the actual component on the screen. This happened, since the module still had to get requested and loaded when the user clicked on the button!
In many cases, we know that users will request certain resources soon after the initial render of a page. Although they may not visible instantly, thus shouldn't be included in the initial bundle, it would be great to reduce the loading time as much as possible to give a better user experience!
Components or resources that we know are likely to be used at some point in the application can be prefetched. We can let Webpack know that certain bundles need to be prefetched, by adding a magic comment to the import statement: 
/* webpackPrefetch: true */
.
js
const EmojiPicker = import(/* webpackPrefetch: true */ "./EmojiPicker");
After building the application, we can see that the 
EmojiPicker
will be prefetched.
 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)
The actual output is visible as a 
link
tag with 
rel="prefetch"
in the 
head
of our document.
html
<link rel="prefetch" href="emoji-picker.bundle.js" as="script" />
<link rel="prefetch" href="vendors~emoji-picker.bundle.js" as="script" />
Modules that are prefetched are requested and loaded by the browser even before the user requested the resource. When the browser is idle and calculates that it's got enough bandwidth, it will make a request in order to load the resource, and cache it. Having the resource cached can reduce the loading time significantly, as we don't have to wait for the request to finish after the user has clicked the button. It can simply get the loaded resource from cache.
Although prefetching is a great way to optimize the loading time, don't overdo it. If the user ended up never requesting the 
EmojiPicker
component, we unnecessarily loaded the resource. This could potentially cost a user money, or slow down the application. Only prefetch the necessary resources.
在我们展示如何根据可见性或交互导入模块的示例中，我们发现点击按钮切换组件到组件实际显示在屏幕上之间通常会有一些延迟。这是因为当用户点击按钮时，模块仍然需要被请求和加载！
在很多情况下，我们知道用户会在页面初始渲染后很快请求某些资源。虽然这些资源不会立即显示，因此不应该包含在初始包中，但我们可以尽可能减少加载时间，以提供更好的用户体验！
我们可以对应用中可能会在某个时刻用到的组件或资源进行预获取。我们可以通过在导入语句中添加魔法注释 
/* webpackPrefetch: true */
，让Webpack知道某些包需要被预获取：
js
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
标签形式出现在文档的
head
中。
html
<link rel="prefetch" href="emoji-picker.bundle.js" as="script" />
<link rel="prefetch" href="vendors~emoji-picker.bundle.js" as="script" />
被预获取的模块会在用户请求资源之前就被浏览器请求并加载。当浏览器处于空闲状态且判断带宽充足时，它会发起请求加载资源并进行缓存。资源被缓存后可以显著减少加载时间，因为用户点击按钮后我们不需要等待请求完成，直接从缓存中获取已加载的资源即可。
虽然预获取是优化加载时间的好方法，但不要过度使用。如果用户最终从未请求
EmojiPicker
组件，那我们就是不必要地加载了资源，这可能会耗费用户的流量，或者拖慢应用。只预获取必要的资源。

Source

来源

References

参考资料