umi 打包配置gzip

[simonyouth]

gzip是可以服务端仅配置ngnix来实现，这与前端包没有关系。

响应流程：Ngnix接受请求->将资源以gzip格式压缩->返回给浏览器->浏览器解压->渲染
ngnix.conf

 gzip  on;
 gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

gzip也可以前后端都配置。需要前端提供.gz格式的包

响应流程：

if(*.gz) return *.gz;
// 如果配置了gzip: on
return gzip(resource);
// 如果gzip: off;
// return resource;

使用compression-webpack-plugin进行gzip的压缩。在umi里使用：
.umirc.ts

export default {
  chainWebpack(config) {
     config
      .plugin('compression-webpack')
      .use(CompressionPlugin,  [{
        deleteOriginalAssets: true, // 是否删除压缩前的文件，看情况配置
        algorithm: 'gzip', // 压缩算法，默认就是gzip
        test: /\.js(\?.*)?$/i, // 根据情况配置，此处仅压缩.js
      }])
  }
}

打包后的文件

ngnix.conf(在之前的基础上添加, 根据情况开启gzip: on)

gzip_static on;

效果图

配置成功gzip后的header

命令行测试 curl -I http://localhost/umi.js

未压缩

ngnix压缩

前端压缩（gzip_static）