vue-cli 3打包体积过大优化

H5引用vant 按需引入 vue.config 引入gzip压缩插件('compression-webpack-plugin')不能用最新版本 yarn add -D compression-webpack-plugin@5.0.1

productionSourceMap:false 关闭map

configureWebpack: config => {
    // 警告 webpack 的性能提示
    config.performance = {
      hints: 'warning',
      maxEntrypointSize: 50000000, // 入口起点的最大体积
      maxAssetSize: 30000000, // 生成文件的最大体积
      // 只给出 js 文件的性能提示
      assetFilter: function (assetFilename) {
        return assetFilename.endsWith('.js')
      }
    }
    if (process.env.NODE_ENV === 'production') {
      // 开启分离js 也可以看到每个依赖js的大小，再针对缩小
      config.optimization = {
        runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 20000,
          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('@', '')}`
              }
            }
          }
        }
      }
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css/, // 匹配的文件名
            threshold: 10240, // 超过10K，进行gzip压缩
            minRatio: 0.8,
            deleteOriginalAssets: false // 是否删除原文件
          })
        ]
      }
    }
  }