使用 Quicklink 加快 React 中的导航速度

使用快速链接自动预提取 React 单页应用的视口内链接。

Addy Osmani
Addy Osmani
X GitHub
Anton Karlovskiy
Anton Karlovskiy
X GitHub 故障
Demián Renzulli
Demián Renzulli
X GitHub 故障

预提取是一种技术，通过提前下载下一页的资源来加快导航速度。Quicklink 是一个库，可让您在链接进入视图时自动预提取链接，从而大规模实现此技术。

在多页应用中，该库会为视口内链接预提取文档（例如 /article.html），以便在用户点击这些链接时，可以从 HTTP 缓存中提取这些链接。

单页应用通常使用一种名为“基于路由的代码拆分”的技术。这样，网站只有在用户导航到指定路线时才能加载该路线的代码。这些文件（JS、CSS）通常称为“区块”。

尽管如此，在这些网站中，与预提取文档相比，在网页需要数据块之前预先抓取这些数据块可以带来最大的性能提升。

实现这一目标面临着一些挑战：

  • 在到达给定路线之前，确定哪些区块（例如 article.chunk.js）与给定路线（例如 /article）相关联并非易事。
  • 这些块的最终到达网址名称无法预测，因为现代模块打包器通常使用长期哈希技术进行版本控制（例如 article.chunk.46e51.js）。

本指南介绍了 Quicklink 如何解决这些难题，以及如何在 React 单页应用中实现大规模预提取。

。

确定与每个路由相关联的分块

quicklink 的核心组件之一是 webpack-route-manifest，这是一个 webpack 插件，可让您生成路由和分块的 JSON 字典。 这样一来，库就能够知道应用的每个路由将需要哪些文件，并在路由进入视图时预提取这些文件。

将插件集成到项目后，它会生成一个 JSON 清单文件，将每个路由与其相应的分块相关联：

{
  '/about': [
    {
      type: 'style',
      href: '/static/css/about.f6fd7d80.chunk.css',
    },
    {
      type: 'script',
      href: '/static/js/about.1cdfef3b.chunk.js',
    },
  ],
  '/blog': [
    {
      type: 'style',
      href: '/static/css/blog.85e80e75.chunk.css',
    },
    {
      type: 'script',
      href: '/static/js/blog.35421503.chunk.js',
    },
  ],
}

可以通过以下两种方式请求此清单文件：

  • 通过网址，例如https://site_url/rmanifest.json。
  • 通过窗口对象的 window.__rmanifest。

针对视口内路由的预提取数据块

清单文件可用后，下一步是通过运行 npm install quicklink 安装 Quicklink。

然后，可以使用高阶分量 (HOC) withQuicklink() 指示在链接进入视图时应预提取给定路线。

以下代码属于 React 应用的 App 组件，可呈现包含四个链接的顶部菜单：

const App = () => (
  <div className={style.app}>
    <Hero />
    <main className={style.wrapper}>
      <Suspense fallback={<div>Loading…</div>}>
        <Route path="/" exact component={Home} />
        <Route path="/blog" exact component={Blog} />
        <Route path="/blog/:title" component={Article} />
        <Route path="/about" exact component={About} />
      </Suspense>
    </main>
    <Footer />
  </div>
);

要告知 Quicklink，这些路线显示在视图中时应进行预提取：

  1. 在组件开头导入 quicklink HOC。
  2. 使用 withQuicklink() HOC 封装每个路线，并将页面组件和 options 参数传递给路由。
const options = {
  origins: [],
};
const App = () => (
  <div className={style.app}>
    <Hero />
    <main className={style.wrapper}>
      <Suspense fallback={<div>Loading…</div>}>
        <Route path="/" exact component={withQuicklink(Home, options)} />
        <Route path="/blog" exact component={withQuicklink(Blog, options)} />
        <Route
          path="/blog/:title"
          component={withQuicklink(Article, options)}
        />
        <Route path="/about" exact component={withQuicklink(About, options)} />
      </Suspense>
    </main>
    <Footer />
  </div>
);

withQuicklink() HOC 使用路线路径作为键，从 rmanifest.json 获取与其关联的分块。 在后台，当链接进入视图时，该库会在网页中为每个分块注入 <link rel="prefetch"> 标记，以便预提取这些分块。 浏览器将以最低优先级请求预提取资源，并在 HTTP Cache 中保留 5 分钟。在此之后，系统会应用资源的 cache-control 规则。 因此，当用户点击链接并移动到指定路线时，这些分块将从缓存中检索，从而大大缩短了呈现该路线所需的时间。

总结

预先抓取可以极大地缩短未来导航的加载时间。在 React 单页应用中，这可以通过在用户进入路由之前加载与每个路线关联的区块来实现。 Quicklink 的 React SPA 解决方案使用 webpack-route-manifest 创建路线和分块映射，以便在链接进入视图时确定要预提取哪些文件。 在整个网站中采用这种方法可以极大地改善导航，使其能够即时显示。