CODEWITHSUNDEEP
cachingvue.jswebpackvue-clivue-cli-3
Sainath S.R
Sainath S.R

Reputation: 3306

Disable cache-loader in webpack 4 vue cli 3

I am using a vue-cli 3/webpack 4 project . My build is generated on AWS Codebuild which starts a new VM instance for each build. Cache -loader in webpack caches the results of babel-loader, vue-loader and terser. But since I run a new instance VM every time I don’t take advantage of this. If the caching itself has some overhead ,it’s better I turn it off then as suggested in some places like here.

How do I configure webpack via vue.conf object to remove the cache loader . Thanks

My project generated webpack config for production is 

rules: [
      /* config.module.rule('vue') */
      {
        test: /\.vue$/,
        use: [
          /* config.module.rule('vue').use('cache-loader') */
          {
            loader: 'cache-loader',
            options: {
              cacheDirectory: '/Users/digitalsuppliers/work/new_build_branch/bmsconsole-client/node_modules/.cache/vue-loader',
              cacheIdentifier: '22f91b09'
            }
          },
          /* config.module.rule('vue').use('vue-loader') */
          {
            loader: 'vue-loader',
            options: {
              compilerOptions: {
                preserveWhitespace: false
              },
              cacheDirectory: '/Users/digitalsuppliers/work/new_build_branch/bmsconsole-client/node_modules/.cache/vue-loader',
              cacheIdentifier: '22f91b09'
            }
          }
        ]
      },

{
        test: /\.jsx?$/,
        exclude: [
          function () { /* omitted long function */ }
        ],
        use: [
          /* config.module.rule('js').use('cache-loader') */
          {
            loader: 'cache-loader',
            options: {
              cacheDirectory: '/Users/digitalsuppliers/work/new_build_branch/bmsconsole-client/node_modules/.cache/babel-loader',
              cacheIdentifier: 'e8179b56'
            }
          },
          /* config.module.rule('js').use('thread-loader') */
          {
            loader: 'thread-loader'
          },
          /* config.module.rule('js').use('babel-loader') */
          {
            loader: 'babel-loader'
          }
        ]
  }

Upvotes: 3

Views: 7428

Answers (2)

byungster
byungster

Reputation: 89

if you mount the vue-component by routing, would you trying to import component to async-way? not sync-way.

when router/index.js loaded.. then may be help you.

ex.

component: () => ({
        component: import('@/views/your/pageComponent.vue'),
        loading: this.loading,
        error: this.error,
        delay: this.delay,
        timeout: this.timeout,
      })

Upvotes: 0

ish
ish

Reputation: 53

One solution is to disable cache either completely or only in production/development based on condition. In order to use it open your vue.config-js and write there

module.exports = {
  chainWebpack: config => {
    // disable cache for prod only, remove the if to disable it everywhere
    // if (process.env.NODE_ENV === 'production') {
      config.module.rule('vue').uses.delete('cache-loader');
      config.module.rule('js').uses.delete('cache-loader');
      config.module.rule('ts').uses.delete('cache-loader');
      config.module.rule('tsx').uses.delete('cache-loader');
    // }
  },

In this example I've commented out the condition, so cache-loader is not used at all.

Upvotes: 3

Related Questions