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
处理 p