webpack gzip 和 nginx gzip的区别

说到前端优化，一般都知道gzip可以进行网络资源压缩, 降低资源在网络中的传输大小。

那要如何开启gzip呢? 网上一搜，大部分是类似的结果，先是在webpack中配置CompressionPlugin和TerserPlugin插件，在打包时就进行一次压缩,并生成对应的gz后缀文件，然后是nginx开启gzip功能。

上面的说法错误了吗？没有，但是貌似都忽略了一个地方，或者说，难道大部分人就没有这么一个疑问，webpack打包时已经进行gzip压缩了，那为什么还要再次开启nginx的gzip压缩呢?

经过反复的搜索查找，终于让我找到了答案，以下是自己的总结和理解:

nginx分为实时gzip和静态gzip, 所谓实时gzip就是无论你的静态资源有没有压缩，我都给你使用gzip压缩一次，所谓静态gzip，就是当你请求某个静态资源时，我先找下该静态资源有没有对应的gz文件，如果有，那nginx就直接使用gz文件，而不再进行实时gzip压缩, 从而减少了nginx对cpu的使用，加快了响应速度. 不过要使用静态gzip必须要先启用nginx的gzip_static 模块.

上面关于webpack gzip和nginx gzip的疑问解决了, 那么还有一个疑问，CompressionPlugin已经给代码压缩一次了，那为什么还要进行一次gzip压缩?

再次经过反复的搜索与测试，终于又让我找到了答案，以下是自己的总结和理解：

gzip能在已经压缩的结果上，进一步进行压缩