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

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

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

核心机制概览（2024~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"); // ... })

几个关键问题解答

2024-2025 年现代趋势对比表

总结一句话

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

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