Rspack 的缓存机制是如何工作的？ - 面试题

Rspack 的缓存机制是其高性能的关键因素之一，通过智能缓存策略可以显著提升构建速度。以下是 Rspack 缓存机制的详细说明：

缓存类型

Rspack 提供了多种缓存类型，适用于不同的场景：

1. 内存缓存

将构建结果存储在内存中，速度最快但重启后失效：

javascript
module.exports = {
  cache: {
    type: 'memory'
  }
}

特点：

最快的缓存速度
重启后缓存失效
适合开发环境
占用内存资源

2. 文件系统缓存

将构建结果存储在文件系统中，持久化保存：

javascript
module.exports = {
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.rspack-cache'),
    cacheLocation: path.resolve(__dirname, '.rspack-cache'),
    name: 'rspack-cache',
    buildDependencies: {
      config: [__filename]
    }
  }
}

特点：

持久化缓存
跨构建保持
适合所有环境
需要磁盘空间

缓存配置选项

基本配置

javascript
module.exports = {
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.cache'),
    cacheLocation: path.resolve(__dirname, '.cache/rspack'),
    name: 'my-cache',
    version: '1.0.0'
  }
}

缓存依赖

javascript
module.exports = {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename],
      tsconfig: ['./tsconfig.json']
    }
  }
}

缓存压缩

javascript
module.exports = {
  cache: {
    type: 'filesystem',
    compression: 'gzip',
    maxAge: 1000 * 60 * 60 * 24 * 7 // 7 days
  }
}

缓存策略

1. 模块缓存

缓存模块的编译结果：

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            cacheCompression: false
          }
        }
      }
    ]
  }
}

2. 解析缓存

缓存模块解析结果：

javascript
module.exports = {
  cache: {
    type: 'filesystem'
  },
  resolve: {
    cacheWithContext: true,
    cachePredicate: (module) => {
      return !/[\\/]node_modules[\\/]/.test(module.resource);
    }
  }
}

3. 构建缓存

缓存整个构建过程：

javascript
module.exports = {
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.rspack-cache'),
    managedPaths: [path.resolve(__dirname, 'node_modules')],
    immutablePaths: []
  }
}

缓存失效策略

1. 基于内容的失效

javascript
module.exports = {
  cache: {
    type: 'filesystem',
    hashAlgorithm: 'md4'
  }
}

2. 基于时间的失效

javascript
module.exports = {
  cache: {
    type: 'filesystem',
    maxAge: 1000 * 60 * 60 * 24 * 7 // 7 days
  }
}

3. 手动清理缓存

javascript
const { rmSync } = require('fs');

// 清理缓存目录
rmSync(path.resolve(__dirname, '.rspack-cache'), {
  recursive: true,
  force: true
});

缓存优化

1. 缓存大小限制

javascript
module.exports = {
  cache: {
    type: 'filesystem',
    maxMemoryGenerations: 1,
    maxAge: 1000 * 60 * 60 * 24 * 7,
    size: 500 * 1024 * 1024 // 500MB
  }
}

2. 缓存压缩

javascript
module.exports = {
  cache: {
    type: 'filesystem',
    compression: 'gzip',
    compressionLevel: 9
  }
}

3. 并行缓存

javascript
module.exports = {
  cache: {
    type: 'filesystem',
    parallelism: 4
  }
}

缓存监控

1. 缓存统计

javascript
module.exports = {
  cache: {
    type: 'filesystem',
    profile: true
  }
}

2. 缓存日志

javascript
module.exports = {
  stats: {
    cached: true,
    cachedAssets: true
  }
}

环境特定配置

开发环境

javascript
module.exports = {
  mode: 'development',
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.cache/dev')
  }
}

生产环境

javascript
module.exports = {
  mode: 'production',
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.cache/prod'),
    maxAge: 1000 * 60 * 60 * 24 * 30 // 30 days
  }
}

CI/CD 缓存

1. 持久化缓存

javascript
module.exports = {
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.cache/ci'),
    buildDependencies: {
      config: [__filename]
    }
  }
}

2. 缓存恢复

yaml
# GitHub Actions 示例
- name: Restore cache
  uses: actions/cache@v3
  with:
    path: .cache
    key: ${{ runner.os }}-rspack-${{ hashFiles('**/package-lock.json') }}

最佳实践

缓存策略选择：
- 开发环境：使用文件系统缓存
- 生产环境：使用持久化缓存
- CI/CD：配置缓存恢复
缓存管理：
- 定期清理过期缓存
- 监控缓存大小
- 优化缓存配置
性能优化：
- 启用缓存压缩
- 合理设置缓存大小
- 使用并行缓存
缓存验证：
- 验证缓存有效性
- 处理缓存失效
- 提供缓存清理机制
团队协作：
- 统一缓存配置
- 文档化缓存策略
- 共享缓存最佳实践

Rspack 的缓存机制通过智能的缓存策略，可以显著提升构建速度，特别是在大型项目和 CI/CD 环境中，缓存的作用更加明显。