react antdpro优化（一）开启gzip 并正确配置nginx

好久没写博客了 还有点激动 哈哈哈哈哈 进正题

如果想实现gzip 前端优化 需要2个部分

（1）前端 开启gzip压缩 (2) nginx 配合同步开启gzip识别 配置（3）验证判断是否成功

（一）前端配置

找到此框架的 配置文件config.tx 位置在

添加配置项目 chainWebpack （如果你因为弄别的 已经写了这个，就可以直接写里面的配置了）

代码如图。（忽略其他的配置项目）

const CompressionWebpackPlugin = require(compression-webpack-plugin);
const prodGzipList = [js, css];

// 开启gzip压缩模式
    process.env.NODE_ENV == production && memo.plugin(CompressionWebpackPlugin).use(CompressionWebpackPlugin, [
      {
        algorithm: gzip, // 指定生成gzip格式
        test: new RegExp(\.( + prodGzipList.join(|) + )$), // 匹配哪些格式文件需要压缩
        threshold: 10240, //对超过10k的数据进行压缩
        minRatio: 0.6 // 压缩比例，值为0 ~ 1
      }
    ])

这里要说以下几点：

（1），这个框架的webpack 扩展和修改 要走链式调用 如果想学习 可以参考以下链接。记住 只是学习 写法哈。因为有的是vue的文档。咱们是react的。不影响webpack怎么写

（2），说代码

前面部分 是引入模块 和 确认要gzip的文件类型 放到 config.ts 最上面即可

后面部分 是加入CompressionWebpackPlugin 参数 如注释

具体参数及说明 去webpack官网看就行了

第三，验证前端打包是否成功

打包后观察 文件结构和后缀。

这里有个知识重点 大部分文件 都会有2个 一个是没有开启gzip的 正常文件 xx.js 或者xx.css

另一个 就是对应的这个文件的 gzip文件 xxx.gz 这里要明白 开启gzip 并不是 生成的文件都是gz的。这里只是会生成正常文件的同时 再生成一个压缩的后的gz文件

到这里 前端的工作也就完成了

（二）nginx配置

核心配置 就是 要求nginx 配置

gzip on;
gzip_static on;
gzip_types text/plain application/x-javascript text/css application/xml;

其他的 关于gzip的配置 我们走默认即可 具体可以参考下面的文章

这里说一下知识重点

（1）如果nginx 只配置gzip on 的话 目前我在页面看 是没有走gzip的（这里我只说我的情况，信息来之运维人员，他说只写gzip on。但是我看页面并没有生效）

（2）添加gzip_types 代表要走gzip的文件。这里要说明一下 如果nginx 只配置了(1)(2)的话 ngxin就会开启动态压缩，那么无论我们前端是否 成功压缩gzip 其实都是nginx在工作 我们做的并没有用 （为什么这么说 后面验证的时候我会解释）

（3）添加gzip_static on. 其他人的博客中是这么介绍的

因为根据自身单位的情况 最后 笔者这里 和运维的结果是

gzip off;

gzip_static on; gzip_types text/plain application/x-javascript text/css application/xml;

这样的配置带来的结果 就是 nginx 不会自动进行gzip 但是如果前端项目如果弄了gz的文件 那么就会优先走gzip （这么做的目的是担心 优化完服务器访问量大了 造成过度浪费 反而引起别的问题）

（三）验证 前端+nginx 是否运行成功

打开你部署好带有gz的项目 找到一个有gz的文件 观察network

如果发现 response header里 出现了上图中的东西 然后 同时观察 同一个包（hash不同是因为 是2次打包的问题，可以忽略）的大小明显变化 并且走gzip的js文件大小 就是我们打包之后的文件大小

那么恭喜你。到此为止。前端+nginx 的gzip优化 完成 🎉