modulePreloadPolyfillPlugin

2023年12月28日

柏拉文

越努力，越幸运

一、认识

---

由于部分支持原生 ESM 的浏览器并不支持 module preload，因此某些情况下需要注入相应的 polyfill 进行降级。当你在 Vite 配置文件中开启下面这个配置时:

{
  build: {
    polyfillModulePreload: true
  }
}

Vite 会自动应用 modulePreloadPolyfillPlugin 插件，在产物中注入 module preload 的 Polyfill 代码。具体实现 摘自之前我们提到过的 es-module-shims 这个库，实现原理如下:

1. 扫描出当前所有的 modulepreload 标签，拿到 link 标签对应的地址，通过执行 fetch 实现预加载

2. 同时通过 MutationObserver 监听 DOM 的变化，一旦发现包含 modulepreload 属性的 link 标签，则同样通过 fetch 请求实现预加载