ant-design-pro 6.0.0 开启 gzip 压缩

使用 ant-design-pro 6.0.0 开发React后台管理应用时，默认打包方式并没有开启 gzip 压缩，可通过 compression-webpack-plugin 插件开启 gzip 压缩。

国内环境为提高安装速度，建议采用 tyarn 进行安装，命令如下：

npm -i yarn tyarn -g

然后安装 compression-webpack-plugin ，命令如下：

tyarn add compression-webpack-plugin --dev

修改 config.ts 配置内容如下：

// 开启gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];

const { REACT_APP_ENV = 'dev' } = process.env;

export default defineConfig({
   // 原有的其他配置
  
   chainWebpack(config, {}) {
    // 开启gzip压缩模式
    process.env.NODE_ENV == 'production' &&
      config.plugin('CompressionWebpackPlugin').use(CompressionWebpackPlugin, [
        {
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8,
        },
      ]);
  },
});

然后通过如下命令进行构建，就可以生成相应的 gzip 压缩文件了

tyarn build

最后需要修改服务器配置，如 nginx 开启 gzip 配置如下：

# 开启 gzip
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";