vue打包文件 chunk-vendors.js体积过大

经过各种百度方法都是下载插件compression-webpack-plugin，我也尝试了这种方法但是觉得不怎么好使，在打包后还是不会把vendors.js解压成各个包，可能是我自己不会使用插件得问题中途导致项目整体报错，通过各种百度方法最后把项目格式化，话不多说还是把我最后实现的代码显示一波

module.exports = {
  // 项目webpack打包后的js，css这类资源使用cdn地址前缀
  // 每次发布部署时请及时更新cdn资源
  publicPath: process.env.NODE_ENV === "development" ? "/" : "/dist/",
  assetsDir: "static",
  outputDir: "dist", // 构建生产环境的目录
  lintOnSave: false, // eslint 在构建的时候不会启动
  runtimeCompiler: true,
  devServer: {
    open: true,
    proxy: proxyObj,
    // overlay: {
    //   warnings: true,
    //   errors: true
    // }
  },
  transpileDependencies: [
    "echarts",
    "qrcode",
    "v-charts",
    "vant",
    "view-design",
    "vue-pdf",
    "vue-slim-better-scroll",
    "xss",
  ],
  productionSourceMap: process.env.NODE_ENV !== "production",
  configureWebpack: {
    entry: "./src/main.js",
    resolve: { extensions: [".js", ".json"] },
    optimization: {
      runtimeChunk: "single",
      // maxInitialRequests: Infinity,
      // minSize: 20000,
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(
                /[\\/]node_modules[\\/](.*?)([\\/]|$)/
              )[1];
              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace("@", "")}`;
            },
            chunks: "all",
            enforce: true,
            priority: 10,
            minSize: 30000,
            maxSize: 50000,
          },
        },
      },
    },
  },
};

 最后实现了把打包后chunk-vendors.js解压成单体