Question

我正在使用vue-cli 3 / webpack 4项目。我的构建是在AWS Codebuild上生成的，该代码为每个构建启动一个新的VM实例。 webpack中的Cache -loader缓存babel-loader，vue-loader和terser的结果。但是由于我每次都运行新的实例VM，所以我没有利用这一点。如果缓存本身有一些开销，那么最好将其关闭，然后按照建议在此处进行设置。

如何通过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'
          }
        ]
  }

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

在此示例中，我已注释掉该条件，因此根本不使用cache-loader。

Answer 2

如果你通过路由挂载 vue-component，你会尝试将组件导入到 async-way 吗？不是同步方式。

当 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中的缓存加载器

2 个答案: