面试题：Webpack代码分割之高级难度：Webpack中代码分割与懒加载结合时的性能调优及资源缓存问题

优化懒加载模块加载速度

使用 splitChunks 高级配置：
- cacheGroups 配置：
  - 可以通过 cacheGroups 对懒加载模块进行更细致的拆分。例如，将所有的第三方库（如 lodash、react 等）拆分到一个单独的 chunk 中。
```
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name:'vendors',
          chunks: 'all'
        }
      }
    }
  }
};
```
  - 这样，在懒加载时，第三方库的 chunk 可以被复用，减少重复下载。
- minSize 和 maxSize 配置：
  - minSize 用于设置拆分 chunk 的最小大小。默认是 30000（30kb），如果懒加载模块较小，可以适当降低这个值，使一些较小的模块也能被拆分出来独立加载。例如：
```
module.exports = {
  optimization: {
    splitChunks: {
      minSize: 10000 // 10kb
    }
  }
};
```
  - maxSize 则用于设置拆分 chunk 的最大大小。当模块超过这个大小时，Webpack 会尝试将其拆分成更小的 chunk，以提高加载性能。例如：
```
module.exports = {
  optimization: {
    splitChunks: {
      maxSize: 200000 // 200kb
    }
  }
};
```
- minChunks 配置：
  - minChunks 表示在拆分前，模块必须被引用的最小次数。如果设置为 2，那么只有被至少两个其他模块引用的模块才会被拆分出来。这有助于避免拆分出一些很少被使用的模块，从而减少不必要的请求。例如：
```
module.exports = {
  optimization: {
    splitChunks: {
      minChunks: 2
    }
  }
};
```
动态导入语法优化：
- 使用 import() 语法进行动态导入时，可以添加注释来指定 chunk 的名称。例如：
```
const MyComponent = React.lazy(() => import(/* webpackChunkName: "my - component" */ './MyComponent'));
```
- 这样在 Webpack 构建时，会根据指定的 chunk 名称进行更有针对性的优化和拆分。

处理缓存策略

版本控制：
- 在 Webpack 配置中，可以使用 output.filename 结合 [contenthash] 占位符来生成带有哈希值的文件名。例如：
```
module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js'
  }
};
```
- 当懒加载的 chunk 内容发生变化时，其 contenthash 也会改变，浏览器会将其视为新的文件，从而重新获取。而未更新的 chunk，由于 contenthash 未变，浏览器会继续使用缓存。
Cache - Control 头设置：
- 在服务器端配置 Cache - Control 头。对于懒加载的 chunk，可以设置较长的缓存时间，例如一年（max - age = 31536000）。当 chunk 更新时，由于文件名的 contenthash 变化，浏览器会重新请求。例如在 Node.js 中使用 Express 服务器：
```
const express = require('express');
const app = express();
app.get('/*.chunk.js', (req, res) => {
  res.set('Cache - Control','max - age = 31536000, public');
  // 处理文件响应
});
```
- 这样既保证了未更新的 chunk 能有效利用缓存，又确保更新后的 chunk 能被浏览器及时获取。

星途面试题库

面试题：Webpack代码分割之高级难度：Webpack中代码分割与懒加载结合时的性能调优及资源缓存问题

知识考点

面试题答案

优化懒加载模块加载速度

处理缓存策略