请说明在 Webpack 中实现异步加载的具体方法和原理。
考察说明
考查对 Webpack 代码分割与异步加载机制的理解及实际应用能力。
回答思路
- 【回答框架 1】Webpack 异步加载的核心是代码分割，通过将代码拆分成多个 chunk，在需要时动态加载。主要实现方式包括动态 import() 语法和 require.ensure（旧版）。动态 import() 返回 Promise，Webpack 会将其依赖的模块单独打包成一个 chunk，并在运行时通过 JSONP 或 script 标签动态加载。
- 【回答框架 2】配置层面，output.chunkFilename 指定异步 chunk 的命名规则，optimization.splitChunks 可进一步拆分公共依赖。异步加载常用于路由懒加载、按需加载大型库或非首屏组件，以减少初始包体积，提升首屏加载速度。
- 【回答框架 3】运行时，Webpack 会生成一个加载函数，创建 script 标签插入页面，加载完成后执行回调，并将模块注册到模块缓存中。加载失败时可通过 catch 处理错误，或配置重试机制。
- 【回答框架 4】实际项目中，结合 Babel 的 dynamic-import 插件或 React 的 React.lazy 与 Suspense，可更优雅地实现组件级异步加载。需注意异步 chunk 的预加载（prefetch/preload）策略，以平衡加载时机与性能。
- 【回答框架 5】异步加载的边界情况包括：动态表达式（如 import(variable)）会导致 Webpack 无法静态分析，需使用魔法注释（如 /* webpackChunkName: "my-chunk" */）指定 chunk 名，或限制动态路径范围。
- 【关键点 1】动态 import() 是 Webpack 异步加载的主要方式，返回 Promise。
- 【关键点 2】通过 output.chunkFilename 和 optimization.splitChunks 控制 chunk 生成。
- 【关键点 3】异步加载减少初始包体积，提升首屏性能。
- 【关键点 4】React.lazy 与 Suspense 基于动态 import 实现组件懒加载。
- 【关键点 5】动态表达式需使用魔法注释或限制路径范围，否则无法正确分割。
- 【易错点 1】动态 import 变量路径会导致 Webpack 无法静态分析，可能打包出错误 chunk。
- 【易错点 2】过度使用异步加载会增加请求次数，需权衡首屏与后续加载性能。
- 【易错点 3】异步 chunk 加载失败时需处理错误，避免白屏。