webpack 5 prefetch runtime 代码解析

本文介绍了Webpack 5中prefetch runtime的工作原理,详细梳理了webpack runtime处理异步chunk的逻辑,并通过实例解释了如何在打包时分析并添加prefetch模块到chunkToChildrenMap中,最终由runtime通过link rel prefetch进行预加载。
摘要由CSDN通过智能技术生成

Webpack 从 4.6.0+ 开始支持 prefetch,用法如下:

使用 prefetch

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

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

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

webpack runtime 处理异步 chunk 的逻辑

这里简单总结为一个图:

image.png

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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值