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怎么写

chainWebpack长用配置方式_song854601134的博客-CSDN博客_chainwebpack

webpack 相关 | Vue CLI

（2），说代码 

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

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

具体参数及说明 去webpack官网看就行了  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的配置 我们走默认即可 具体可以参考下面的文章

nginx中如何设置gzip（总结） - 范仁义 - 博客园

如何开启nginx gzip压缩 - lutwelve - 博客园

compression-webpack-plugin 开启gzip vue - 枫若 - 博客园

这里说一下知识重点 

（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优化 完成 🎉