• ant-design-pro 6.0.0 开启 gzip 压缩

    • 2023-01-05 09:45
    • 字数 1,007
    • 阅读 390

    使用 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]\.";
    
    
back_to_top