Embed instant.page into your Webpack bundle

15 February 2019

A new library has been making the rounds on Hacker News which is titled “Make your site’s page instant in one minute”. It works by taking advantage of browser prefetching by applying tags somewhat like below just as you’re hovering above, or touching a link:

<!docroot html>
<html>
  <head>
    <link rel="prefetch" href="/target_url">
  </head>
  ...
</html>

More details on how it works can be found on the instant.page website.

One of the things I like about this is that it’s progressive enhancement—it loads the content a bit faster for the browsers that support it, and pages still load even if it doesn’t support it.

While you can call it just by linking to the script in your HTML, I’ll show you in this post how I embedded this library using NPM and Webpack so you don’t have to call Cloudflare if you don’t want to.

The webpack.config.js file

My webpack.config.js file for the site’s theme is included below:

// webpack.config.js
const path = require('path');

module.exports = {
  module: {
    rules: [{
      test: /\.min\.js$/,
      use: ['script-loader']
    }]
  },
  entry: './src/js/main.js',
  mode: 'production',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'assets/js'),
  }
}

Adding instant.page to package.json

To add instant.page to your package.json, we need to pull the project in. Because it’s a public repository, this process is quite straightforward—just run the below command, and it’ll add instant.page to node_modules directory:

$ npm install git+https://github.com/instantpage/instant.page.git

Once that’s done, you’re ready to rock.

Add instant.page to your JS bundle

In my case, adding instant.page was quite easy—I inserted an import statement into the JS file:

// /src/js/main.js
import 'instant.page';

You can alternatively copy the script located in /node_modules/instant.page/instantpage.js to your assets directory, and just include it as a script in your HTML if you’d like.