-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support for webpackPrefetch and webpackPreload #1317
Comments
👀 |
This should be part of As I have seen, there is stale PR for this. Did someone try the PR? But it should be included instead of being ignored. This feature can later be adapted when there is quicker api access available. |
The problem is that this pr would slow down html-webpack-plugin a lot for all users. However if you need an intermediate solution please create a plugin for the html-webpack-plugin and share it with the community |
An opt-in option rather than an opt-out option might be a good middle ground. I suspect it might take a while for webpack/webpack#10094 to be worked on. Unfortunately, I don't know the webpack code base well enough to take a crack at it myself. Since html-webpack-plugin is currently the defacto standard for embedding webpack bundles in html, that issue blocks a lot of users from taking full advantage of preload/prefetch. |
|
I really understand that you want me to add this asap for free but unfortunately right now my time is limited 😞. Please create a plugin so we can experiment with the intermediate solution. What do you think? |
Yes, time pressure is currently an issue. What do you think? I didn't take a deeper look at it... |
@jantimon I have a couple of questions regarding this new plugin. My static app uses multiple
during the webpack build this results in: and renders as follows:
What should the Put the following resource hints above the three statements?
Somehow it does not make sense, to put the resource hints right before where the resources get requested. But the Hm. Personally I would remove the added resource references (link, script, script) from the
Can you shed some light on this? |
You can try the defer loading strategy: new HtmlWebpackPlugin({
scriptLoading: 'defer'
}) In that configuration all scripts are added into the head of the document and there is probably no performance gain for preload. Wouldn’t it make more sense to load only ressources which are lazy loaded? |
Perhaps someone might find this interesting, posting it here: Actually, this all works without using a plugin, for example
or:
Now I get the If you instead call it directly in your entry script, like: this will add a normal script tag tom your head and do a regular fetch without prefetching. |
@maclockard I am not sure if I understand, but webpack adds prefetch/preload tags to the head section? See my previous comment. |
@Legends Yeah, webpack itself has supported prefetch/preload for some time now, however, it can only add the script tags for a secondary chunk group to the HTML at runtime. Webpack alone can't add script tags to HTML at build time, instead, you need a plugin like html-webpack-plugin to add the needed script tags to the HTML when building the bundle. A consequence of this is that before the webpack runtime code can add the script tags for the secondary chunk group, the initial chunk group must first load. This is particularly problematic in the case of wanting to use preload for the secondary chunk group. This is significant in the case of preload where you want the secondary chunk group to be loaded in parallel with the initial chunk group. Needing to wait for the initial chunk group to fully load defeats the purpose of preloading. |
Sorry I just saw some more of your previous comments, so I think you are probably aware of this already. leaving it up though in case it helps someone else understand the problem. Interesting that html-webpack-plugin correctly adds the tags if inside of a callback. @jantimon is that expected behavior? I would be wary of relying on it if it was not |
@maclockard Ah, I got my prefetch-preload-plugin in my webconfig, that's why I had them after compile. Yes, webpack will add them during runtime, and yes this is a problem especially for |
I've create a very small test repo where I Everything webpack does in this respect is add So now I have my little plugin (not part of the repo above) which adds This means I have 1.) Now I could be satisfied with What do you think? If 2.) is the way to go, is there a way to tell webpack not to inject the |
I guess way |
Here a short behavior clarification:
There is no need to html-webpack-plugin to add prefetch tags. webpack already adds at runtime and that's not too late as they are intended to download after the other files. Preload can't be added by webpack when it has a chance to run code, it's already too late. So preload need to be added to the HTML. Also note that many users use preload incorrectly when they actually should use prefetch. When using preload you must use the script (call To get the preloaded files without the Stats you can use this: entrypoint // is the Entrypoint which should be rendered.
const preloaded = entrypoint.getChildrenByOrders(moduleGraph, chunkGraph).preload; // is ChunkGroup[] | undefined
if (!preloaded) return;
const chunks = new Set();
for (const group of preloaded) { // the order of preloaded is relevant
for (const chunk of group.chunks) chunks.add(chunk);
}
const files = new Set()
for (const chunk of chunks) {
for (const file of chunk.files) files.add(file);
}
for (const file of files) {
add(`<link rel="preload" href="${publicPath}${file}" />`);
} |
👀 |
Would anyone be interested to turn the code above into a PR? |
This issue had no activity for at least half a year. It's subject to automatic issue closing if there is no activity in the next 15 days. |
This is effectively just #1150 but I'm opening a new issue since I can't comment on closed issues in this repo. I filed webpack/webpack#10094 which I understand to be a blocker for working on this.
Hopefully, folks wanting this feature will find this issue first and understand the current blockers.
Past issues:
stats.entrypoints[].childAssets
#934The text was updated successfully, but these errors were encountered: