umi打包分包、压缩为gzip

umi打包分包、压缩为gzip

1、压缩插件【注意版本】

"compression-webpack-plugin": "^6.0.0",

2、在.umirc.ts （config.js、config.ts）文件添加

  chunks: ['vendors', 'umi'],
  chainWebpack: function (config, { webpack }) {
    config.merge({
      optimization: {
        splitChunks: {
          chunks: 'all',
          minSize: 30000,
          minChunks: 3,
          automaticNameDelimiter: '.',
          cacheGroups: {
            react: {
              name: 'react',
              priority: 20,
              test: /[\\/]node_modules[\\/](react|react-dom|react-dom-router)[\\/]/,
            },
            vendor: {
              name: 'vendors',
              test({ resource }) {
                return /[\\/]node_modules[\\/]/.test(resource);
              },
              priority: 6,
            },
            antd: {
              name: "antd",
              test: /[\\/]node_modules[\\/]antd[\\/]/,
              chunks: "all",
              priority: 10
            },
            xlsx: {
              name: "xlsx",
              test: /[\\/]node_modules[\\/]xlsx[\\/]/,
              chunks: "async",
              priority: 10
            },
            reactcolor: {
              name: "xlsx",
              test: /[\\/]node_modules[\\/]react-color[\\/]/,
              chunks: "async",
              priority: 19
            },
            wangeditor: {
              name: 'wangeditor',
              priority: 21,
              test: /[\\/]node_modules[\\/](wangeditor|@wangeditor|@wangeditor\/editor|@wangeditor\/editor-for-react)[\\/]/,
            },
            uiwmap: {
              name: 'uiwmap',
              priority: 20,
              test: /[\\/]node_modules[\\/](uiw|@uiw|@uiw\/react-baidu-map|@uiw\/react-baidu-map-require-script)[\\/]/,
            },
            charts: {
              name: 'charts',
              priority: 20,
              test: /[\\/]node_modules[\\/](@ant-design\/charts)[\\/]/,
            },
            async: {
              chunks: 'async',
              minChunks: 2,
              name: 'async',
              maxInitialRequests: 1,
              minSize: 0,
              priority: 5,
              reuseExistingChunk: true,
            },
          },
        },
      }
    });
    if (process.env.NODE_ENV === 'production') {
      //gzip压缩
      config.plugin('compression-webpack-plugin').use(CompressionPlugin, [
        {
          test: /\.js$|\.html$|\.css$/, //匹配文件名
          threshold: 10240, //对超过10k的数据压缩
          deleteOriginalAssets: false, //不删除源文件
        },
      ]);
    }
    //过滤掉momnet的那些不使用的国际化文件
    config.plugin("replace").use(require("webpack").ContextReplacementPlugin).tap(() => {
      return [/moment[/\\]locale$/, /zh-cn/];
    });
  }

3、nginx配置

 # 开启和关闭gzip模式
gzip on;

# gizp压缩起点，文件大于1k才进行压缩
gzip_min_length 1k;

# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 6;

# 进行压缩的文件类型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/xml text/javascript application/json;

# /****目前只加一行也生效**/
# nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩
gzip_static on;

# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

# 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区
gzip_buffers 4 16k;