umi/webpack + nginx 启用gzip，优化请求文件大小，加快首屏渲染速度

nginx压缩分为两种模式

• 动态压缩（压缩工作由nginx服务器完成，会消耗服务器资源）
• 静态压缩（压缩工作在build的时候就打包好.gz资源，服务器优先返回.gz资源）

一、动态压缩（服务器压缩）

只需要在 nginx.conf 文件中做如下修改即可：

# 开启和关闭gzip模式
gzip on;
# gizp压缩起点，文件大于1k才进行压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
gzip_buffers 4 16k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.0;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 2;
# 进行压缩的文件类型
gzip_types text/plain application/javascript text/css application/xml;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

二、静态压缩（构建时就生成.gz资源）

1、安装 compression-webpack-plugin 插件

npm install compression-webpack-plugin

2、webpack配置

...
chainWebpack: function (config: any) {
	if (process.env.NODE_ENV === 'production') {
	    //gzip压缩
	    config.plugin('compression-webpack-plugin').use(CompressionPlugin, [
	      {
	        test: /\.(js|css)$/, //匹配文件名
	        threshold: 10240, //对超过10k的数据压缩
	        deleteOriginalAssets: false, //删除源文件
	      },
	    ]);
  }
}
...

3、build后查看构建产物是否存在.gz的资源

4、nginx开启gzip：

静态压缩会直接将产物中预先压缩过的 .gz文件发送给浏览器，而不再实时压缩文件，如果找不到 .gz文件，将会使用对应的原始文件。

a 、安装nginx模块http_gzip_static_module，该模块默认关闭，直接使用会报错：unknown directive “gzip_static”

查看是否开启

nginx -V 2>&1| grep -o http_gzip_static_module

开启模块

// 清空之前编译的内容
make clean
// 配置
./configure --with-http_gzip_static_module
// 编译
make && make install

注意：对于Docker的nginx:alpine不需要处理，直接下一步配置即可

b、配置nginx

gzip_static  on;
gzip_proxied expired no-cache no-store private auth;

静态资源的MIME类型可能会出现错误

此时，页面可能会加载空白，控制台报错

Failed to load module script: Expected a JavaScript module script but the <img src="server" alt="" width="100%" /> responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

报错的原因是返回的js 和 css Content-Type变成了 text/html，浏览器无法识别，修改如下：

// 针对出现MIME类型错误的文件，单独再配置gzip_static
location ~ \.(js|mjs|json|css|html)$ {
  gzip_static on;
}

参考引用：
https://juejin.cn/post/7202896198607454245
https://blog.csdn.net/fxss5201/article/details/106535475