我在vue.config.js中的原始配置使用默认的分块策略，在本地构建大约需要5分钟，在gitlab pipeline中需要35分钟，结果是一个大于50 MB的块和其他几个大块（见屏幕截图）

module.exports = {
  devServer: {
    disableHostCheck: true
  },
  publicPath: process.env.PUBLIC_PATH || '/',
  configureWebpack: {
  },
  pages: {
    index: {
      entry: "src/main.js",
      template: "public/index.html",
      filename: "index.html",
      chunks: ["chunk-vendors", "chunk-common", "index"]
    },

      visualform: {
        entry: "src/visualform/main.js",
        template: "public/visualform.html",
        filename: "visualform.html",
        chunks: ["chunk-vendors", "chunk-common", "visualform"],
      }
  }
};

因此，在阅读了webpack文档之后，我想我应该使用以下更新的配置来尝试减少块大小

module.exports = {
  devServer: {
    disableHostCheck: true
  },
  publicPath: process.env.PUBLIC_PATH || '/',
  configureWebpack: {
        plugins: [
            new webpack.optimize.AggressiveSplittingPlugin({
                minSize: 20000,
                maxSize: 200000,
            }),
        ],
  },
  pages: {
    index: {
      entry: "src/main.js",
      template: "public/index.html",
      filename: "index.html",
      chunks: ["chunk-vendors", "chunk-common", "index"]
    },

      visualform: {
        entry: "src/visualform/main.js",
        template: "public/visualform.html",
        filename: "visualform.html",
        chunks: ["chunk-vendors", "chunk-common", "visualform"],
      }
  }
};

这导致了以下减少的块大小，但似乎破坏了应用程序（没有更多的index.js和visualform.js存在，我还尝试在configureWebpack中使用filename的输出部分，但没有任何区别）

当我通过浏览器访问应用程序时，我在控制台中得到一个空白页面和以下内容

一堆这样的留言：

资源http：//localhost：3000/js/379.js已使用链接预加载进行预加载，但在窗口的加载事件发生后的几秒钟内未使用。请确保它具有适当的as值，并且是有意预加载的。

我还尝试在configure webpack中进行分块优化，以尝试覆盖vue cli服务的默认分块：

configureWebpack: {
optimization: {
splitChunks: {
                cacheGroups: {
                       chunks: 'all',
                      minSize: 20000,
                      maxSize: 200000,
                      maxInitialRequests: Infinity,
                    'chunk-vendors': {
                        test: /[\\/]node_modules[\\/]/,
                         name(module) {
        
                           const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                          
                           return `npm.${packageName.replace('@', '')}`;
                         },
                      chunks: 'all',
                      priority: -10,
                      maxAsyncRequests: 6,
                      maxInitialRequests: 4,
                      minChunks: 2,
                      minSize: 20000,
                      maxSize: 200000,
                      reuseExistingChunk: true,
                      enforce: true
                    },
                     'chunk-common': {
                       name: 'chunk-common',
                       test: path.resolve('src/components'), 
                       chunks: 'all',
                       minChunks: 3, //  minimum common number
                       minSize: 20000,
                       maxSize: 250000,
                       priority: 5,
                       reuseExistingChunk: true,
                     }
               }
            }
    }
}

但是，此策略会导致相同的空白页面，不生成入口点visualform.js和main.js页面，并且在控制台中显示相关警告

资源http：//localhost：3000/js/npm.element-ui~._node_modules_element-ui_lib_t.js已使用链接预加载进行预加载，但在窗口的加载事件发生后的几秒钟内未使用。请确保它具有适当的as值，并且是有意预加载的。

任何帮助都将不胜感激。分块减少了gitlab pipeline大约65%的构建时间，所以如果我能让它工作将最大限度地减少这个瓶颈。
我是一个有点webpack菜鸟，一直在阅读文档，但有很多配置选项，所以我可能错过了一些东西。
先谢谢你。