webpack 5 prefetch runtime 代码解析

Webpack 从 4.6.0+ 开始支持 prefetch，用法如下：

使用 prefetch

const loadAsync = () =>
  import(/* webpackChunkName:"async" */ /* webpackPrefetch: true */ './async'); 

异步模块里面依赖了异步模块并且使用了 webpackPrefetch 才会在打包出来的 runtime 中增加 prefetch 的逻辑。

要理解这个逻辑先把整个 webpack runtime 梳理一遍。

webpack runtime 处理异步 chunk 的逻辑

这里简单总结为一个图：

webpack runtime 处理异步加载 import() 这种是在 __webpack_require__.e 中。

__webpack_require__.e 内部通过 reduce 把多个挂载在 __webpack_require__.f 对象下的处理函数迭代一次，比如

• __webpack_require__.f.j 通过 head 插入 script 方式加载 js，里面的逻辑有点复杂
• __webpack_require__.f.miniCSS 加载 css
• __webpack_require__.f.prefetch 处理 prefetch

可以把 webpack 通过 reduce