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 等），可以告诉我，我可以继续展开说明。