Webpack持久化存储

1.cache-loader(适用于webpack4以及之前的缓存)

cache-loader是一个Webpack loader,它可以缓存加载器的结果。这对于那些计算成本高或者执行时间长的loader非常有用。

cache-loader是一个独立的 loader，用于缓存其他 loader 的处理结果，适用于 Webpack 4 及更早版本。它通过将中间结果存储到磁盘或内存中，避免重复处理未变更的文件，从而显著减少构建时间

1.1. 安装

npm install cache-loader --save-dev

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['cache-loader', 'babel-loader'],
        include: path.resolve('src'),
      },
    ],
  },
};

2. cache.type(webpack5)

cache.type是 Webpack 5 引入的核心缓存配置，支持两种模式：

1. ‌"memory"‌：基于内存的临时缓存，适用于开发环境，默认启用。
2. ‌"filesystem"‌：基于文件系统的持久化缓存，将构建结果存储到磁盘，适用于生产环境，可大幅提升二次构建速度。
   此配置可将大型项目的二次构建时间从 10-18 秒降至 500-800 毫秒 

module.exports = {
  cache: {
    type: 'filesystem', // 启用持久化缓存
    cacheDirectory: path.resolve(__dirname, '.temp/cache'), // 自定义缓存目录
    buildDependencies: {
      config: [__filename], // 依赖文件变化时缓存失效
    },
  },
};

3. cache-loader与cache.type的对比

1. ‌适用场景‌
   • cache-loader 需显式配置在每个 loader 前，适用于 Webpack。
   • cache.type 是 Webpack 5 内置功能，全局生效且配置更简洁。
2. ‌性能差异‌
   • cache.type: 'filesystem' 的优化效果更显著，直接复用模块和 chunk 的构建结果。

4.生产环境优化建议

1. ‌结合哈希命名‌：使用 [chunkhash] 或 [contenthash] 确保文件内容变更后客户端能获取新版本。
2. ‌Babel 缓存‌：通过 babel-loader 的 cacheDirectory: true 加速 JS 转译。

综上，Webpack 5 的 cache.type: 'filesystem' 是当前最优解，而 cache-loader 适用于旧版本或特定 loader 的缓存需求