通过动态 import() 实现按需加载，将代码拆分为多个 chunk，利用 webpack 的 tree shaking 机制只打包实际使用的模块。具体做法是在代码中根据条件调用 import()，webpack 会自动生成对应的 chunk 文件，浏览器仅在需要时请求这些文件，从而减少初始包体积。
如何配置 Webpack 以支持动态导入
在 Webpack 中启用动态导入无需额外配置，只需确保使用 ES Module 语法并调用 import() 函数即可。Webpack 会将该调用识别为分割点（split point），自动创建新的 chunk。为了优化效果，可以结合 output.chunkFilename 设置文件名模板，并使用 optimization.splitChunks 控制公共代码的提取策略。
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
chunkFilename: '[name].chunk.js' // 动态导入生成的 chunk 命名规则
},
optimization: {
splitChunks: {
chunks: 'all', // 对同步和异步代码都进行分割
cacheGroups: {
vendors: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
chunks: 'all',
priority: 10
}
}
}
}
};上述配置中，chunkFilename 指定了动态导入产生的文件名为 [name].chunk.js，其中 [name] 由 import() 中的路径决定。splitChunks 配置将 node_modules 中的代码提取到独立的 vendors chunk 中，避免重复打包。当代码执行到 import('./moduleA') 时，Webpack 会生成一个名为 moduleA 的 chunk 文件，并在运行时动态加载它。
立即学习“Java免费学习笔记（深入）”；
动态导入与静态导入的性能差异
静态 import 在编译时解析所有依赖，导致所有模块都被打包进主 bundle，增加初始加载时间。动态 import() 返回 Promise，仅在运行时执行，允许将代码拆分为小块，按需加载。这种差异使得动态导入更适合处理大型库、路由组件或低频功能，显著降低首屏加载时间。
// 静态导入：所有模块立即加载
import * as utils from './utils';
import { heavyLib } from 'heavy-lib';
// 动态导入：按需加载
button.addEventListener('click', async () => {
const { heavyLib } = await import('heavy-lib');
heavyLib.process();
});在静态导入示例中，utils 和 heavyLib 在页面初始化时就被加载，无论用户是否使用它们。而在动态导入示例中，heavyLib 仅在按钮点击后才被加载，减少了初始资源请求。这种按需加载策略特别适用于大型应用，其中某些功能使用频率较低，但体积较大。通过对比可见，动态导入能有效延迟非关键资源的加载，提升用户体验。
动态导入失败时的错误处理
当动态导入的模块不存在或网络请求失败时，import() 会抛出异常。开发者需要在 try...catch 块中捕获这些错误，并提供降级方案或用户提示。例如，可以显示“加载失败”消息，或回退到备用功能。正确处理错误能避免因模块缺失导致的页面崩溃，增强应用的健壮性。
async function loadModule() {
try {
const module = await import('./optional-module');
module.init();
} catch (error) {
console.error('Failed to load module:', error);
// 降级逻辑：使用默认行为或提示用户
showFallbackUI();
}
}在上述代码中，loadModule 函数尝试动态导入 ./optional-module。如果模块加载成功，调用其 init 方法；如果失败，捕获异常并记录日志，同时调用 showFallbackUI 提供备用界面。这种模式确保了即使可选模块不可用，应用仍能正常运行，提升了容错能力。
