"fetchPriority" for script tags

[aboktor]

Feature Request

Ability to set fetchPriority attribute on script tags.

Webpack doesn't offer any way to set fetchPriority attribute on script tags that are managed/added by webpack.

I propose adding output.scriptFetchPriorty option with values boolean = false, string: 'high' | 'low' | 'auto'
When !== false, it is used in LoadScriptRuntimeModule to add the attribute to the script tag.

Relevant links

https://html.spec.whatwg.org/multipage/scripting.html#the-script-element
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#browser_compatibility

[TheLarkInn]

@aboktor (also cc @alexander-akait @snitin315):

If we create an output.scriptFetchPriority option, this would mean that every lazy loaded bundle would apply the same priority.

Similar to how we provide the prefetch and preload options:

import(
  /* webpackInclude: /\.json$/ */
  /* webpackExclude: /\.noimport\.json$/ */
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  `./locale/${language}`
);

Would it be a better design to have customizable fetch priority per each lazy-loaded bundle?

import(
  /* webpackFetchPriority: "high" */
  `./locale/${language}`
);

Alternatively we could have both options. If we go that route I would want to limit the users barrier to complexity with managing both of the options and how they override eachother. That would need to be fleshed out if so. A suggestion for this "dual design" would be:

• output.scriptFetchPriority applies fetch priority to all lazy loaded bundles, it defaults to false
• webpackFetchPriority magic comment overrides the global output.scriptFetchPriority if used also defaults to false
• Since this is a web-only feature it would only be needed for web-based targets where jsonp script insertion is used.

Thoughts?

[aboktor]

My usecase requires applying it globally to every lazy loaded bundle.
If we think users will want to customize this per import then I think what @TheLarkInn is proposing would work quite well.

[TheLarkInn]

If you are onboard with this work as suggested, I think we are happy to take a PR for this. Can iterate on regular or draft PR. Either works!

[alexander-akait]

@aboktor Let's use fetchPriority, because we have built-in CSS support and it will be useful to implement for link too

[alexander-akait]

@aboktor i.e. I think we don't need output.scriptFetchPriority, we have such things for modules - https://webpack.js.org/configuration/module/#moduleparserjavascriptdynamicimportpreload, so you can specify it there, just look how it is implemented for preload/prefetch

[aboktor]

@alexander-akait So basically use module.parser.javascript.dynamicImportFetchPriority instead?

[alexander-akait]

@aboktor Yeah, so you can apply it in different places, also /* webpackFetchPriority: "high" */ should be supported too

[TheLarkInn]

I'm on board with this. It still applies the "global nature" for dev experience but is customizable at the module rule level and can apply to many module types.