feat: modulepreload polyfill

[patak-dev]

Description

Implement rel="modulepreload" polyfill as described in https://guybedford.com/es-module-preloading-integrity as proposed by @yyx990803

I had to modify importAnalysisBuild to always use 'modulepreload' if config.build.polyfillModulePreload is enabled, instead of the runtime detection

About naming, I used Used config.build.polyfillModulePreload and id vite:modulepreload-polyfill

Another option could be to use config.build.polyfillModulepreload and for the id vite:module-preload-polyfill

IIUC when modulepreload is supported (as in chrome), the polyfill will still issue a fetch. I trust Guy Beford here that this isn't a problem.

The polyfill was adapted from https://github.com/guybedford/es-module-shims/blob/main/src/es-module-shims.js, removing the import maps logic that was intervened with this polyfill (leaving almost the same version as in the blog post)

Tested in Firefox and seems to be fetching the scripts correctly, more testing would be good.

Additional Notes

We could wait after the beta is out to merge this one, or we could use the beta to test it so it is already part of 2.4.0

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

[patak-dev]

I don't see a reason for always executing the polyfill, even for browsers that support modulepreload. Looks like in the polyfill this is what is being done https://github.com/guybedford/es-module-shims/blob/main/src/es-module-shims.js#L318

But we already have support detection for modulepreload in importAnalysisBuild

const relList = document.createElement('link').relList
const supportsModulePreload = relList && relList.supports && relList.supports('modulepreload')

I added a guard to the polyfill so we don't change things for chromium where this is already supported.

[patak-dev]

We discussed with the team that this feature is going to be merged before the beta for the next minor (2.5)

[croban]

@patak-js ist it possible to also to check polyfillModulePreload where skip const is defined e.g.
const skip = config.build.ssr || !config.build.polyfillModulePreload
otherwise it's looks like polyfill can't be removed?

[patak-dev]

@croban could you raise a bug report with a reproduction if you found a problem? AFAICS the polyfill plugin is not included in config.build.polyfillModulePreload is false here

vite/packages/vite/src/node/plugins/index.ts

Line 34 in a93e03a

config.build.polyfillModulePreload

[derekyle]

Did this never make it into 2.4.0 or later? I am currently running vite 2.6.7 and I see the modulepreload-polyfill script getting loaded in firefox, but I am also seeing some files downloaded twice in Firefox. Interestingly, the modulepreload-polyfill is being loaded using rel=modulepreload and is one of the files being downloaded twice.

[patak-dev]

Would you open an issue with a reproduction so we can better track this?