Anton Karlovskiy on web.dev

Prefetching in create-react-app with Quicklink

2020-06-08T00:00:00Z

This codelab shows you how to implement the Quicklink library in a React SPA demo to demonstrate how prefetching speeds up subsequent navigations.

Measure #

Before adding optimizations, it's always a good idea to first analyze the current state of the application.

Click Remix to Edit to make the project editable.
To preview the site, press View App. Then press Fullscreen .

The website is a simple demo built with create-react-app.

Complete the following instructions in the new tab that just opened:

Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
Click the Network tab.
Select the Disable cache checkbox.
In the Throttling drop-down list, select Fast 3G to simulate a slow connection type.
Reload the app.
Type chunk into the Filter textbox to hide any resources that do not include chunk in their name.

The site uses route-based code splitting, thanks to which only the necessary code is requested at the beginning.

Clear the network requests in DevTools.
Within the app, click the Blog link to navigate to that page.

The JS and CSS chunks for the new route are loaded to render the page.

Next, you'll implement Quicklink in this site, so that these chunks can be prefetched in the home page, making the navigation faster.

This allows you to combine the best of both techniques:

Route-based code splitting tells the browser to only load the necessary chunks at a higher priority at page load time.
Prefetching tells the browser to load the chunks for in-viewport links at the lowest priority, during the browser's idle time.

Configure `webpack-route-manifest` #

The first step is to install and configure webpack-route-manifest, a webpack plugin that lets you generate a manifest file associating routes with their corresponding chunks.

Usually, you would need to install the library, but we've already done it for you. Here's the command that you would need to run:

npm install webpack-route-manifest --save-dev

config-overrides.js is a file placed in your project root directory where you can override existing behaviour of the webpack configuration, without having to eject the project.

To view the source, press View Source.

Open config-overrides.js for edit and add the webpack-route-manifest dependency at the beginning of the file:

const path = require('path');
const RouteManifest = require('webpack-route-manifest');

Next, configure the webpack-route-manifest plugin by adding the following code to the bottom of config-overrides.js:

module.exports = function override(config) {
  config.resolve = {
    ...config.resolve,
    alias: {
      '@assets': `${path.resolve(__dirname, 'src/assets')}`,
      '@pages': `${path.resolve(__dirname, 'src/pages')}`,
      '@components': `${path.resolve(__dirname, 'src/components')}`,
    },
  };

  config.plugins.push(
    new RouteManifest({
      minify: true,
      filename: 'rmanifest.json',
      routes(str) {
        let out = str.replace('@pages', '').toLowerCase();
        if (out === '/article') return '/blog/:title';
        if (out === '/home') return '/';
        return out;
      },
    }),
  );

  return config;
};

The new code does the following:

config.resolve declares variables with the internal routes to pages, assets and components.
config.plugins.push() creates a RouteManifest object and passes it the configuration so that the rmanifest.json file can be generated based on the site's routes and chunks.

The manifest.json file will be generated and made available at https://site_url/rmanifest.json.

Configure quicklink #

At this point you would need to install the Quicklink library in your project. For simplicity, we already added it to the project. Here's the command that you would need to run:

npm install --save quicklink

Open src/components/App/index.js for edit.

First, import the Quicklink higher order component (HOC):

import React, { lazy, Suspense } from 'react';
import { Route } from 'react-router-dom';

import Footer from '@components/Footer';
import Hero from '@components/Hero';
import style from './index.module.css';
import { withQuicklink } from 'quicklink/dist/react/hoc.js';

const Home = lazy(() => import(/* webpackChunkName: "home" */ '@pages/Home'));
const About = lazy(() => import(/* webpackChunkName: "about" */ '@pages/About'));
const Article = lazy(() => import(/* webpackChunkName: "article" */ '@pages/Article'));
const Blog = lazy(() => import(/* webpackChunkName: "blog" */ '@pages/Blog'));

Next, create an options object after the Blog variable declaration, to use as an argument when calling quicklink:

const options = {
	origins: []
};

Finally, wrap each route with the withQuicklink() higher order component, passing it an options parameter and the target component for that route:

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>
);

The previous code instructs to prefetch chunks for the routes wrapped with withQuicklink(), when the link comes into the view.

Measure again #

Repeat the first 6 steps from Measure. Don't navigate to the blog page yet.

When the home page loads the chunks for that route are loaded. After that, Quicklink prefetches the route's chunks for the in-viewport links:

These chunks are requested at the lowest priority and without blocking the page.

Clear the Network log again.
Disable the Disable cache checkbox.
Click the Blog link to navigate to that page.

The Size column indicates that these chunks were retrieved from the "prefetch cache", instead of the network. Loading these chunks without a Quicklink took approximately 580ms. Using the library it now takes 2ms, which represents a 99% reduction!

Speed up navigations in React with Quicklink

2020-06-08T00:00:00Z

Prefetching is a technique to speed up navigations by downloading the resources for the next page, ahead of time. Quicklink is a library that allows you to implement this technique at scale, by automatically prefetching links as they come into the view.

In multi-page apps the library prefetches documents (e.g. /article.html), for in-viewport links, so that when the user clicks on these links they can be picked up from the HTTP cache.

Single-page apps commonly use a technique called route-based code splitting. This allows the site to load the code for a given route only when the user navigates to it. These files (JS, CSS) are commonly referred to as "chunks".

With that said, in these sites, instead of prefetching documents the biggest performance gains come from prefetching these chunks before the page needs them.

Achieving this presents some challenges:

It's not trivial to determine which chunks (e.g. article.chunk.js) are associated with a given route (e.g. /article) before landing on it.
The final URL names of these chunks can't be predicted, as modern module bundlers typically use long-term hashing for versioning (e.g. article.chunk.46e51.js).

This guide explains how Quicklink solves these challenges and allows you to achieve prefetching at scale in React single page apps.

Determine chunks associated with each route #

One of the core components of quicklink is webpack-route-manifest, a webpack plugin that lets you generate a JSON dictionary of routes and chunks. This allows the library to know which files are going to be needed by each route of the application and prefetch them as the routes come into the view.

After integrating the plugin with the project, it will produce a JSON manifest file associating each route with its corresponding chunks:

{
  '/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',
    },
  ],
}

This manifest file can be requested in two ways:

By URL, e.g. https://site_url/rmanifest.json.
Through the window object, at window.__rmanifest.

Prefetch chunks for in-viewport routes #

Once the manifest file is available, the next step is to install Quicklink by running npm install quicklink.

Then, the higher order component (HOC) withQuicklink() can be used to indicate that a given route should be prefetched when the link comes into the view.

The following code belongs to an App component of a React app that renders a top menu with four links:

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>
);

To tell Quicklink that these routes should be prefetched as they come into the view:

Import the quicklink HOC at the beginning of the component.
Wrap each route with the withQuicklink() HOC, passing the page component and options parameter to it.

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>
);

The withQuicklink() HOC uses the path of the route as a key to obtain its associated chunks from rmanifest.json. Under the hood, as links come into the view, the library injects a <link rel="prefetch"> tag in the page for each chunk so they can be prefetched. Prefetched resources will be requested at the lowest priority by the browser and kept in the HTTP Cache for 5 minutes, after which point, the cache-control rules of the resource apply. As a result of this, when a user clicks on a link and moves to a given route, the chunks will be retrieved from the cache, greatly improving the time it takes to render that route.

Conclusion #

Prefetching can greatly improve load times for future navigations. In React single-page apps, this can be achieved by loading the chunks associated with each route, before the user lands in them. Quicklink's solution for React SPA uses webpack-route-manifest to create a map of routes and chunks, in order to determine which files to prefetch, when a link comes into the view. Implementing this technique throughout your site can greatly improve navigations to the point of making them appear instant.