Add preload to script and link tags in production builds

[muhammadtarek]

I want to preload styles and main script. But the current config generates the .html without preload support. So is there any way to make that happens?

[maximalism2]

@muhammadtarek
I have the same issue, and as a temporary solution I've made a little node-script, which runs automatically after main build process finishes.

Here it is:

const fs = require('fs');
const pathToEntry = './build/index.html';
const bundlesRegExp = /\/static\/\w+\/\w+.[a-z0-9]+.\w{2,3}/g;
const splitBy = '</title>';

const builtHTMLContent = fs.readFileSync(pathToEntry).toString();
const links = builtHTMLContent.match(bundlesRegExp);
const parts = builtHTMLContent.split(splitBy);

let fileWithPreload = [
  parts[0],
  splitBy,
];

links.forEach(link => {
  let fileType = 'script';

  if (/\.css$/.test(link)) {
    fileType = 'style';
  }

  fileWithPreload = [
    ...fileWithPreload,
    `<link rel="preload" href="${link}" as="${fileType}">`,
  ];
});

fileWithPreload = [
  ...fileWithPreload,
  parts[1],
];

fs.writeFileSync(pathToEntry, fileWithPreload.join(''));

to run it automatically after each prod build add node ./addPreloadLink.js to npm script build like this:

{
  "scripts": {
    "build":  "react-scripts build && node ./addPreloadLinks.js"
  }
}

Hope it will help you 🙂

[muhammadtarek]

It works. Thank you @necinc
Closing issue

[gaearon]

Can you explain why this is useful? The JS/CSS bundle generated by CRA is required for the application to work, and there is nothing to display until it has loaded, so why would preload make any difference?

[muhammadtarek]

I need to request the JS/CSS bundle as soon as possible which will reduce the loading time that's as far I understand

[maximalism2]

@muhammadtarek
Actually yes, there is no reason to put preload link in the head of generated index.html, since the size of initial html is so small so reduction of loading time won't be tangible.
It's better to add preload to stream from your SSR.

[muhammadtarek]

@necinc Thanks, I didn't know that.

[gaearon]

If I understand it right, "preload" is useful when you don't use a script/link right away but will likely need it in the future. Browser then optimistically starts loading it with a low priority.

This is different from CRA case where you can't possibly render anything without these tags.

It might, however, be useful for codesplit chunks.

[muhammadtarek]

You're right. I misunderstood it. Thanks for clarification

[samccone]

Hey all, just chiming in here. link rel preload is useful since it enables critical resources to start downloading before the page has finished parsing... As soon as the streaming HTML parser encounters this tag the browser knows to go ahead and start fetching the asset.

Putting link rel preload for critical CSS and JS can increase boot time on the order of 10+%.

Take for instance this page

The other script tags that are higher in the DOM can actually cause the critical main script to load later resulting is substandard perf on low quality connections.

One of the talks I have given on this topic:
https://youtu.be/RWLzUnESylc?t=579

--

Let me know if I can be of any help here!

Thanks as always.

[gaearon]

In case of CRA the page is usually tiny (a hundred bytes at most) but I'd be open to supporting this if it's contributed upstream to html-webpack-plugin. Thanks for explaining!

[strunkandwhite]

Here's what I believe to be another use case:

I have an above-the-fold image that needs to be loaded as quickly as possible. Currently, the browser only knows to fetch the image after the bundle containing the reference to that image has finished loading and parsing. Adding support for rel='preload' would allow me to begin loading that image more or less immediately.

[gaearon]

@jacklenehan I don't think this is related to this issue? The issue is about generated script tags. I don't see how putting preload on them would make loading an image referenced from the bundle faster.