一：引言

webpack 异步加载原理，就是将 js 模块给独立导出一个.js 文件，使用这个模块的时候，再创建一个 script 对象，加入到 document.head 对象中，浏览器会自动帮我们发起请求，去请求这个 js 文件，然后写个回调函数，让请求到的 js 文件做一些业务操作

二：定义

Webpack 异步加载的核心原理是通过动态导入语法触发代码分割，并在运行时通过 JSONP 机制按需加载独立 chunk 文件

三：原理

（1）触发阶段：动态导入语法

         1：语法识别=>使用 import() 或历史遗留的 require.ensure() 语法标记异步模块,Webpack 在 AST 解析阶段识别这些动态导入语句，将其作为代码分割点‌

        // 触发代码分割的典型写法
button.onclick = () => {
  import('./moduleA').then(module => { /* 执行逻辑 */ });
};

         2：模块标识=>为每个异步模块生成唯一 chunk ID，并将依赖关系记录到 manifest 文件中‌

（2）构建阶段：代码分割

       1：生成独立chunk=>动态导入的模块会被拆分为独立文件（如 1.bundle.js），主 chunk 仅保留加载逻辑和占位符‌

       2：依赖图更新=>构建模块依赖图时，动态导入的模块会被标记为异步依赖，形成树状 chunk 结构‌

（3）运行时阶段：动态加载

       1：JSONP加载机制=>用户触发异步加载时，Webpack 动态创建 <script> 标签发起 chunk 请求，并通过 webpackJsonp 回调函数注入模块到运行时环境‌

        // 生成的运行时加载代码示例
__webpack_require__.e(/* chunkId */1).then(() => { 
  return __webpack_require__(/* moduleId */'./src/a.js');
});

       2：缓存与去重=>已加载的 chunk 会被缓存到 installedChunks 对象中，避免重复请求‌

（4）模块执行阶段

      1：依赖合并=>加载完成的模块通过 __webpack_require__ 函数合并到主模块系统，执行初始化逻辑‌

      2：Promise链控制=>异步加载返回 Promise 对象，确保依赖加载完成后再执行回调逻辑‌

四：总结

‌1：减少首屏加载时间‌：将非关键逻辑延迟加载，主 bundle 体积减少 30%-60%‌

‌2：按需加载优化‌：用户交互时才加载关联模块（如路由组件、弹窗等）‌

3‌：并行加载加速‌：浏览器可同时下载多个 chunk 文件‌