Webpack 在异步请求 JS 文件时获取 JS Bundle 的机制

Webpack 在异步请求 JS 文件时获取 JS Bundle 的机制

Webpack 在处理代码分割（Code Splitting）后产生的异步 chunk（通常是import()动态导入）时，浏览器最终是怎么知道要去请求哪个 .js 文件，以及**请求回来后怎么正确执行**，这个过程主要依赖以下几个核心机制：

核心机制概览（2024~2025 主流方式）

机制	主要文件	作用	谁负责生成	当前主流方式
manifest	runtime chunk	chunkId → 文件名映射表	webpack（内置）	绝大多数项目都有
publicPath	runtime 或配置	决定请求的 URL 前缀	用户配置 + runtime 推断	非常重要
webpack_require.p	runtime	就是 publicPath 的运行时变量	runtime 注入	核心变量
webpack_require.u	runtime	chunkId → chunk 文件名 的函数	webpack（新版本更智能）	现代主流
webpack_require.e	runtime	真正发起 chunk 加载的函数	webpack	异步加载入口
JSONP / script tag	浏览器	实际发起 .js 请求的方式	浏览器	仍然是默认（2025年）

详细流程（以最常见的 JSONP + webpackChunkName 方式为例）

1. 代码里写： import(/* webpackChunkName: "user-detail" */ './user-detail.js') 2. 打包后生成的文件大致如下： - main.js ← 入口文件 + runtime - 123.user-detail.js ← 异步 chunk（chunkId=123） - 456.other-page.js ← 另一个异步 chunk 3. webpack 在 main.js（或单独的 runtime chunk）中注入了一段类似这样的代码： // 简化的伪代码 var installedChunks = { 0: 0 }; // 已加载的 chunk 标记 __webpack_require__.e = function requireEnsure(chunkId) { var promises = []; // 检查是否已经加载过 if (!installedChunks[chunkId]) { var promise = new Promise(function(resolve, reject) { // 记录 promise，后面 onload 会 resolve var callbacks = installedChunks[chunkId] = [resolve, reject]; // 重要！决定文件名的地方 ↓↓↓ var filename = __webpack_require__.u(chunkId); // ← 得到 "123.user-detail.js" var fullUrl = __webpack_require__.p + filename; // ← publicPath + 文件名 // 创建 script 标签 var script = document.createElement('script'); script.charset = 'utf-8'; script.timeout = 120; script.src = fullUrl; // 错误处理 script.onerror = script.onload = function(event) { // ... 处理成功/失败，把 promise resolve/reject }; document.head.appendChild(script); }); promises.push(promise); } return Promise.all(promises); } 4. 当代码执行到 import() 时，实际上调用的是： __webpack_require__.e("123").then(function() { // chunk 已经加载完成，可以使用模块了 var module = __webpack_require__("./src/user-detail.js"); // ... })

几个关键问题解答

问题	答案来源	说明
文件名是怎么知道的？	__webpack_require__.u(chunkId)	webpack 打包时把 chunkId → 文件名映射写死或生成函数
请求路径前缀从哪来？	__webpack_require__.p(publicPath)	通常来自 output.publicPath 配置
publicPath 是相对路径怎么办？	runtime 会尝试推断（script.src 位置）	现代 webpack 5 有比较智能的推断逻辑
CDN + 版本号怎么办？	output.publicPath = ‘https://cdn.com/v1.2.3/’	直接写死或通过环境变量注入
如何知道 chunk 加载成功了？	script.onload + JSONP 回调	chunk 内部会调用 webpackJsonp.push
多个 chunk 同时加载会不会冲突？	webpackJsonp 是全局数组，push 的时候带 chunkId	基本不会冲突
开发环境和生产环境的区别？	开发环境通常用 webpack-dev-server 的内存文件系统 + sockjs	生产环境才是真正的 .js 文件请求

2024-2025 年现代趋势对比表

方式	chunk 名控制方式	publicPath 处理	推荐场景	备注
JSONP（默认）	webpackChunkName / id	自动推断 + 配置	绝大多数项目	兼容性最好
importScripts	基本不用	—	Service Worker	特殊场景
SystemJS/Federation	远程模块名	由 host 决定	Module Federation	微前端
ESM + import()	浏览器原生	type=“module”	实验性、全 ESM 项目	未来方向，但目前还需 polyfill

总结一句话

Webpack 异步 chunk 的加载机制本质上是：
通过运行时注入的__webpack_require__.e函数 + chunkId → 文件名映射 + publicPath 前缀，动态创建<script>标签去请求对应的 js 文件，文件执行后通过全局 webpackJsonp 回调通知 webpack 该 chunk 已就绪。

如果你想深入了解某个特殊场景（CDN 部署、Module Federation、publicPath 动态计算、chunk loading 错误重试、预加载 prefetch/preload 等），可以告诉我，我可以继续展开说明。