Vue3打包后chunk-vendors.js文件过大，加载慢，前端配置项

在vue.config.js中添加optimization配置

const { defineConfig } = require('@vue/cli-service')
//Element-plus配合插件动态引入组件、组件样式
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, //关闭eslint校验
  devServer: {
    proxy: {
      '/admin': {
        //代理api
        target: 'http://vue3.youlai.tech/prod-api/api/v1/', // 代理接口(注意只要域名就够了)
        changeOrigin: true, //是否跨域
        ws: true, // 是否代理 proxy websockets
        pathRewrite: {//路径重置
          '^/admin': '' //代理路径
        }
      }
    },
  },
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      }),
    ],
    optimization: {
      /**
       * runtimeChunk可选值有：true或'multiple'或'single'
       * true或'multiple'会有每个入口对应的chunk。不过一般情况下
       * 考虑到要模块初始化，设置为single就够多数情况下使用啦。
       * 详情见官网：https://webpack.docschina.org/configuration/optimization/#optimizationruntimechunk
       * */
      runtimeChunk: 'single',
      /**
       * 以前是CommonsChunkPlugin，现在换成optimization.splitChunks。普通项目下方的配置就足够用啦
       * 详情见官网：https://webpack.docschina.org/configuration/optimization/#optimizationsplitchunks
       * */
      splitChunks: {
        chunks: 'all', // 可选值：all，async 和 initial。all功能最强大，所以咱们就使用all
        maxInitialRequests: Infinity, // 最大并行请求数，为了以防万一，设置无穷大即可
        minSize: 20000, // 引入的模块大于20kb才做代码分割，官方默认20000，这里不用修改了
        maxSize: 60000, // 若引入的模块大于60kb，则告诉webpack尝试再进行拆分
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
            priority: -10, // 优先级值越大优先级越高，默认-10，不用修改
            name(module) { // 设定分包以后的文件模块名字，按照包名字替换拼接一下
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
              return `npm.${packageName.replace('@', '')}`
            },
          },
        },
      }
    }
  }
})