Inject files with preload and prefetch into head

[matthiasg]

It would be nice if html-webpack-plugin could also generate <link rel="preload" … > and <link rel="prefetch" … > into head. Is this already possible or something that might be of interest ?

[jantimon]

You can already just add them to the template - Do you see any potential for auto generating them?

[szimek]

@jantimon I'm not sure how much it's related, but could you maybe show a sample code how to inject e.g. fonts using <link rel="preload" as="font" href="..." crossorigin>? I'm not really sure how to get urls to them (e.g. https://mycdn.com/fonts/myfont-8879aba1192079fb82e409474682cef1.woff2) after they are modified by webpack, if these fonts are referenced only in CSS files.

[matthiasg]

@jamesjieye not sure what you mean by that. right now my webpack setup automatically adds script tags to the generated scripts right before the and the files have auto generated hashes in the names. it would be helpful if they are also added as preload entries before . Is that what you are talking about ?

[jantimon]

@szimek I guess we don't have those information on the plugin level - it would require an additional loader-plugin combination
@matthiasg the browser is smart enough to preload/prefetch all css and javascript files linked in the code - so I don't see what we can do on the plugin level

[matthiasg]

@jantimon the case for preload is argued well over here https://hackernoon.com/10-things-i-learned-making-the-fastest-site-in-the-world-18a0e1cdf4a7#.qkgtuk71c. this is an extreme case of course, i was just wondering how easy it might be, to emit the extra lines into head from this plugin. i thought it would be a quite straight forward optional thing to do.

basically the preload goes into the , the scripts go at the bottom (also preload can potentially be used to trigger downloading dynamically added files ahead of time). scripts at the top block the render, scripts at the bottom start loading late.

[jantimon]

@matthiasg wow that's interesting - the html-webpack-plugin offers a hook which would allow exactly that but you would have to write a plugin to use the hook

[numical]

Hmm.. I'm trying to decide whether adding a 'resource hint' option to script-ext-html-webpack-plugin would be useful.
The functionality would be straight-forward enough - add a matching <link rel="prefetch\preload" href="/library.js" as="script"> for selected <script> elements.
The question is whether this actually has any benefit.
@jantimon states the browser is smart enough to preload/prefetch all css and javascript files linked in the code but the clearest definition I can find is at w3c which indicates this is not quite so clear-cut.
Any opinions?
On a related but separate issue would a separate plugin that dealt with all resource hint options and all types of resources (not just scripts) have any real advantage over just putting them in a template?

[matthiasg]

When I posed the question I did not know about the templating mechanism inside which allows inserting this into head

<% for (var index in htmlWebpackPlugin.files.js) { %>
<link rel="preload" href="<%= htmlWebpackPlugin.files.js[index] %>" as="script">
<% } %>

but generally speaking, I would say that a plugin would be easier to approach and remove some potential errors. just like the html plugin emits script tags before body end by default and does not rely on templating for this either,

[jantimon]

@numical a new plugin would be nice and might be a great addition for https://github.com/facebookincubator/create-react-app

[jantimon]

@matthiasg could you please take a look and give me feedback on https://github.com/jantimon/html-resource-hints-plugin ?

[matthiasg]

@jantimon sure. jantimon/resource-hints-webpack-plugin#1

Great work !

[jantimon]

Thanks 👍

[lock]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.