Remove the vue rule `cache-loader`, but the `vue-loader` options are not removed

[zzetao]

Version

4.4.1

Environment info

  System:
    OS: macOS 10.15.5
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  Binaries:
    Node: 13.12.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 81.0.4044.138
    Edge: Not Found
    Firefox: Not Found
    Safari: 13.1.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.3.1 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.3.1 
    @vue/cli-plugin-babel: ~4.3.0 => 4.3.1 
    @vue/cli-plugin-eslint: ~4.3.0 => 4.3.1 
    @vue/cli-plugin-router: ~4.3.0 => 4.3.1 
    @vue/cli-plugin-typescript: ~4.3.0 => 4.3.1 
    @vue/cli-plugin-vuex: ~4.3.0 => 4.3.1 
    @vue/cli-service: ~4.3.0 => 4.3.1 
    @vue/cli-shared-utils:  4.3.1 
    @vue/component-compiler-utils:  3.1.2 
    @vue/eslint-config-typescript: ^5.0.2 => 5.0.2 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^6.2.2 => 6.2.2 
    typescript: ~3.8.3 => 3.8.3 
    vue: 2.5.16 => 2.5.16 
    vue-class-component: 6.2.0 => 6.2.0 
    vue-cli-plugin-dll: ^1.1.12 => 1.1.12 
    vue-clipboards: ^1.2.0 => 1.3.0 
    vue-cropper: ^0.2.8 => 0.2.9 
    vue-eslint-parser:  7.0.0 
    vue-hot-reload-api:  2.3.4 
    vue-i18n: ^5.* => 5.0.3 
    vue-loader:  15.9.2 
    vue-property-decorator: 6.0.0 => 6.0.0 
    vue-router: 3.0.1 => 3.0.1 
    vue-style-loader:  4.1.2 
    vue-template-compiler: 2.5.16 => 2.5.16 
    vue-template-es2015-compiler:  1.9.1 
    vuedraggable: ^2.16.0 => 2.23.2 
    vuex: ^3.1.3 => 3.4.0 
    vuex-class: ^0.3.0 => 0.3.2 
  npmGlobalPackages:
    @vue/cli: 4.3.1

What is expected?

I want to remove support for cache-loader on rule('vue') by config.module.rule('vue').uses.delete('cache-loader').

{
    chainWebpack: config => {
        config.module.rule('vue').uses.delete('cache-loader');
    }
}

What is actually happening?

But I found that the vue-loader keeps go through cache because it still sets cacheDirectory / cacheIdentifier.

code: https://github.com/vuejs/vue-cli/blob/34f303b0b6a03f96e8c21d308931219154a7e627/packages/%40vue/cli-service/lib/config/base.js#L90-L105

Steps to reproduce

Here's my solution:

delete config.module.rule('vue').uses.store.get('vue-loader').store.get('options').cacheDirectory
delete config.module.rule('vue').uses.store.get('vue-loader').store.get('options').cacheIdentifier

---

I don't think it is a bug, but it makes me wonder at first 🤔, is there a better solution?

[fxxjdedd]

@zzetao The cache of vue-loader completely depends on the cache-loader, so the cacheDirectory/cacheIdentifier here has no effect.

You can verify whether the vue-loader cache is generated through the node_modules/.cache directory.

As for why chainWebpack did not delete the options parameter of vue-loader, just because you did not delete it. 😂

[zzetao]

@fxxjdedd

Thanks for the reply.

I found from the source code and documentation that vue-loader can be cached with cacheDirectory/cacheIdentifier.

documentation： https://github.com/vuejs/vue-loader/blob/bcee5b9127/docs/options.md#cachedirectory--cacheidentifier

code: https://github.com/vuejs/vue-loader/blob/d3fa467815c0a2da87fd3062ab8bb182cfa84264/lib/loaders/pitcher.js#L127-L140

---

At first, I thought that disabling cache from rule(vue).uses.delete('cache-loader') would do the trick

When I think about it, removing cache-loader from chainWebpack rule(vue) and disabling cache with vue-loader are two things.

[fxxjdedd]

@zzetao Thanks for the correction, vue-loader's handling of cache is more complicated than I thought