面试题：Webpack代码分割策略之高级难度：动态导入与代码分割优化

优化加载性能相关配置

异步chunk加载顺序
- 使用 import() 语法的动态导入：在代码中使用 import() 进行动态导入，Webpack 会自动将这些导入的模块拆分成异步chunk。例如：
```
// 动态导入模块
const loadModule = async () => {
    const { someFunction } = await import('./someModule.js');
    someFunction();
};
```
- 魔法注释（Magic Comments）：可以使用魔法注释来控制chunk的名称和加载优先级。例如，通过 webpackChunkName 来命名chunk，方便在调试和分析时识别：
```
const loadModule = async () => {
    const { someFunction } = await import(/* webpackChunkName: "my - custom - chunk" */ './someModule.js');
    someFunction();
};
```
- 预加载（Preloading）：可以使用 /* webpackPreload: true */ 魔法注释来告诉浏览器在页面加载时就开始加载该chunk，这样当实际需要使用时，加载速度会更快。
```
const loadModule = async () => {
    const { someFunction } = await import(/* webpackPreload: true */ './someModule.js');
    someFunction();
};
```
缓存问题
- 设置 output.filename 和 output.chunkFilename：在Webpack配置中，通过设置 output.filename 用于主入口文件，output.chunkFilename 用于异步chunk文件，并在文件名中包含哈希值。例如：
```
module.exports = {
    output: {
        filename: 'bundle.[contenthash].js',
        chunkFilename: 'async - chunk.[contenthash].js'
    }
};
```
这样，当文件内容发生变化时，哈希值也会改变，浏览器会重新下载新的文件，而内容未变时，浏览器会使用缓存中的文件。
- 使用 splitChunks 插件：可以通过 splitChunks 插件将第三方库等公共模块提取出来，单独打包成chunk。这样在多个页面或动态导入中共享这些公共模块时，只要公共模块内容不变，就可以利用浏览器缓存。例如：
```
module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};
```
上述配置会将所有类型的chunk（包括异步chunk）中可共享的模块提取出来，形成单独的chunk，提升缓存利用率。

星途面试题库

面试题：Webpack代码分割策略之高级难度：动态导入与代码分割优化

知识考点

面试题答案

优化加载性能相关配置