在 webpack 4 vue cli 3 中禁用缓存加载器

Posted

技术标签:

【中文标题】在 webpack 4 vue cli 3 中禁用缓存加载器【英文标题】:Disable cache-loader in webpack 4 vue cli 3 【发布时间】:2019-07-22 11:57:57 【问题描述】:

我正在使用 vue-cli 3/webpack 4 项目。 我的构建是在 AWS Codebuild 上生成的,它为每个构建启动一个新的 VM 实例。 webpack 中的 Cache -loader 缓存 babel-loader、vue-loader 和 terser 的结果。但是由于我每次都运行一个新的实例虚拟机,所以我没有利用这一点。 如果缓存本身有一些开销,最好按照这里的建议关闭它。

如何通过 vue.conf 对象配置 webpack 以移除缓存加载器。 谢谢

我的项目为生产生成的 webpack 配置是

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'
          
        ]
  

【问题讨论】:

【参考方案1】:

一种解决方案是根据条件完全或仅在生产/开发中禁用缓存。 为了使用它,打开你的 vue.config-js 并写在那里

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');
    // 
  ,

在这个例子中,我已经注释掉了条件,所以根本没有使用缓存加载器。

【讨论】:

【参考方案2】:

如果你通过路由挂载 vue 组件,你会尝试将组件导入异步方式吗?不是同步方式。

router/index.js 加载.. 那么可能会对你有所帮助。

例如

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

【讨论】:

以上是关于在 webpack 4 vue cli 3 中禁用缓存加载器的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli2.0和vue-cli3.0中当发布到生产环境时禁用console.log

Vue - 禁用 Eslint

禁用 vue-cli webpack 编码图像 base64

vue-loader:如何在 webpack 4 和 vue-cli3 中使用 vue-loader v15

旧版vue-cli脚手架Webpack3项目如何升级Webpack4

关闭 css 的单独块,vue cli 3 webpack 4