cache-loader缓存失效后如何避免重复编译？

Zz燕燕提问于 2026-02-06 07:38:29 阅读 69

优化

我在Vue项目里用了cache-loader，第一次构建确实快很多。但每次修改代码后缓存都会失效，导致全量编译时间反而更长，这到底是怎么回事？

尝试过在webpack配置里这样写：{ test: /.vue$/, use: ['cache-loader', 'vue-loader'] }，但发现只要修改任何.vue文件，所有文件都会重新编译。

查文档说可以加标识符参数，但这样配置后：


module.exports = {
  module: {
    rules: [
      {
        test: /.vue$/,
        use: [
          {
            loader: 'cache-loader',
            options: { ident: 'vue-component' }
          },
          'vue-loader'
        ]
      }
    ]
  }
};

还是会出现缓存频繁失效的情况，有没有更好的解决办法？

构建优化

我来解答赞 9 收藏

反馈

1 条解答

a'ゞ景景 Lv1

cache-loader默认用文件路径做缓存键，改任意.vue文件会触发全量失效。加个hash-loader把文件路径换成hash就行，省得折腾参数：

use: [

  'cache-loader',

  { loader: 'hash-loader', options: { hash: 'sha256' } },

  'vue-loader'

]

装完loader记得清缓存目录，不然老缓存还带着旧路径信息。

2026-02-06 08:00