面试题：Webpack缓存机制之高级难度：Webpack缓存的优化策略

1. 配置持久化缓存

使用cache选项：在Webpack配置中，启用cache并设置为'filesystem'，这会将编译结果持久化到文件系统，下次编译时如果模块没有变化，直接使用缓存结果，避免重复编译。

module.exports = {
  cache: {
    type: 'filesystem',
    // 可选配置，如缓存目录
    cacheDirectory: path.resolve(__dirname, '.webpack/cache')
  },
  // 其他配置...
};

缓存组：通过cacheGroups可以对不同类型的模块进行分组缓存，比如将第三方库和业务代码分开缓存。这样当业务代码变化时，第三方库的缓存仍然可用。

module.exports = {
  cache: {
    type: 'filesystem',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name:'vendor-cache'
      },
      default: {
        name: 'default-cache'
      }
    }
  },
  // 其他配置...
};

2. 优化模块标识符

确定哈希算法：使用恰当的哈希算法生成模块标识符，如contentHash。contentHash根据模块内容生成哈希值，只有当模块内容发生变化时，哈希值才改变，从而保证缓存的有效性。例如在output配置中设置filename: '[name].[contentHash].js'。
避免不必要变化：确保Webpack配置中不会因为无关因素导致模块标识符变化。比如，不要在module.exports中使用动态值，除非必要，否则会导致每次编译的配置不同，进而影响缓存。

3. 处理动态导入模块

预加载和预渲染：对于动态导入的模块，可以使用import()语法的同时结合webpackPreload和webpackPrefetch注释。webpackPreload会在页面加载时就开始加载模块，而webpackPrefetch会在浏览器空闲时加载模块。

// 预加载模块
const myModule = import(/* webpackPreload: true */ './myModule.js');
// 预渲染模块（在支持的环境下）
const myModule = import(/* webpackPrerender: true */ './myModule.js');

动态导入缓存策略：Webpack默认会为动态导入的模块生成单独的chunk。可以通过splitChunks配置，将动态导入的公共模块提取出来并缓存。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  },
  // 其他配置...
};

4. 缓存清理策略

手动清理：在项目构建脚本中添加清理缓存的命令，例如使用rimraf库删除缓存目录（如果使用filesystem缓存）。在需要重新编译所有模块时，手动执行此命令清理缓存。
自动清理：可以在Webpack插件中实现根据特定条件（如版本号变化）自动清理缓存的逻辑。例如，在构建开始前检查项目版本文件，如果版本号变化，清理缓存目录。

星途面试题库

面试题：Webpack缓存机制之高级难度：Webpack缓存的优化策略

知识考点

面试题答案

1. 配置持久化缓存

2. 优化模块标识符

3. 处理动态导入模块

4. 缓存清理策略