search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.84k stars 26.88k forks source link

[CRA v4] Support on preloading/prefetching resources #9948

Open mwskwong opened 4 years ago

mwskwong commented 4 years ago

Is your proposal related to a problem?

Currently, there is no native support on preloading or prefetching resources (e.g. fonts and CSS). The workaround is to write a node script to modify the generated index.html. Yet, users are not supposed to do that and this trick is quite dirty.

(Write your answer here.)

Describe the solution you'd like

(Describe your proposed solution here.) Native support of preloading or prefetching resource, which will be translated to something like:

Font:

<link rel="preload" href="/static/media/font.woff2" as="font" type="font/woff2" crossorigin />

CSS:

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
n3tr commented 4 years ago

There is a discussion about this in https://github.com/facebook/create-react-app/issues/3319

AFAIK, We are waiting for html-webpack-plugin to support this and per conversation in https://github.com/jantimon/html-webpack-plugin/issues/934 -- I don't know if it will happen anytime soon.

In the meantime, you might take a look at https://github.com/jantimon/resource-hints-webpack-plugin and https://github.com/GoogleChromeLabs/preload-webpack-plugin but it requires you to eject or extends the webpack configuration.

ekokotov commented 3 years ago

Any news? seems like jantimon/html-webpack-plugin#934 is closed now!