优化vue项目打包的chunk.js 和 chunk-vonder.js

1 将chunk-vonder.js 拆解处理

1.1 修改vue.config.js

configureWebpack: config => {

  


    //  chunk-vonder.js 分割
    let optimization = {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 2000, // 依赖包超过20000bit将被单独打包
        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('@', '')}`
            }
          }
        }
      }
    }
    Object.assign(config, {
      optimization
    })
    }

这个拆开可能使得chunk.js文件变大

第二种方法

chainWebpack: config => {
config.optimization.minimize(true);//压缩代码
config.optimization.splitChunks({
        chunks: 'all'
    })
}