跳到主要内容

cache

一、认识​

cache 缓存生成的 webpack 模块和 chunk，来改善构建速度。Webpack5 的持久化缓存功能则将构建结果保存到文件系统中，在下次编译时对比每一个文件的内容哈希或时间戳，未发生变化的文件跳过编译操作，直接使用缓存副本，减少重复计算, 发生变更的模块则重新执行编译流程。

二、语法​

禁用缓存

module.exports = {
  //...
  cache: false,
};

开启缓存，且为 memory 模式: cache: true 与 cache: { type: 'memory' } 配置作用一致。

module.exports = {
  //...
  cache: true,
};
module.exports = {
  //...
  cache: {
    type: 'memory'
  },
};

开启缓存，且为filesystem模式: 当将 cache.type 设置为 filesystem 是会开放更多的可配置项。

module.exports = {
  cache:{
    type:'filesystem',
    /// …… 其他配置项
  }
}

三、配置项​

3.1 cache.typ​

cache.type: 缓存类型，支持 'memory' | 'filesystem'，需要设置为 filesystem 才能开启持久缓存

3.2 cache.cacheDirectory​

cache.cacheDirectory: 缓存文件路径，默认为 node_modules/.cache/webpack

3.3 cache.buildDependencies​

cache.buildDependencies: 额外的依赖文件，当这些文件内容发生变化时，缓存会完全失效而执行完整的编译构建，通常可设置为各种配置文件，如：

module.exports = {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [
        path.join(__dirname, 'webpack.dll_config.js'),
        path.join(__dirname, '.babelrc')
      ],
    },
  },
};

3.4 cache.managedPaths​

cache.managedPaths: 受控目录，Webpack 构建时会跳过新旧代码哈希值与时间戳的对比，直接使用缓存副本，默认值为 ['./node_modules']；

3.5 cache.profile​

cache.profile: 是否输出缓存处理过程的详细日志，默认为 false

3.6 cache.maxAg​

cache.maxAge: 缓存失效时间，默认值为 5184000000 。