关于gzip，在Nginx与webpack中的结合使用

看到productionGzip:false,

productionGzipExtensions: ['js','css'],

有想过，webpack 中productionGzip 的意义？

压缩并相应后，在服务端有一个备份，下次有请求时，直接返回备份的gzip内容.

图一，没有开Nginx的gzip

图二，是开启Nginx的gzip 配置

图三，是webpack预先打包gzip，nginx的配置使用；

gz的意义

Nginx的gzip

location ~* /static/js/  {  

  gzip_static on;

  expires 30d;  

  add_header Cache-Control public;  

}

location ~* /static/css/  {  

  gzip_static on;

  expires 30d;  

  add_header Cache-Control public;  

}  

http_gzip_static_module 模块

在nginx中使用gzip_static来缓存gzip文件

安装了nginx的Gzip静态模块（使用--with-http_gzip_static_module编译nginx）。它允许您预先缓存您的gzip文件。可以通过nginx -V检查编译时带了哪些模块。

假设你有文件/css/a.css。当遇到a.css的请求时。静态gzip模块将查找/css/a.css.gz。如果找到它，它将作为gzip压缩内容提供该文件。这允许您在部署站点时使用最高压缩比（gzip -9）对静态文件进行gzip。Nginx除了提供静态gzip文件之外绝对没有工作要做（它非常擅长提供静态内容）。

无论你在nginx配置中有gzip部分，你都可以：

gzip_static on

注意，必须自己创建文件的.gz版本，并且在文档中提到，如果原始文件和.gz文件具有相同的时间戳，则更好。因此，在创建文件后“touch”文件可能是个好主意。将gzip压缩降低（gzip_comp_level 1..3）也是一个好主意。这将最小化压缩动态内容，而不会给服务器带来太大压力。请记住，这仅适用于静态内容（css，javascript等）。动态页面可以并且应该被压缩，但压缩率较低，以保持服务器的负载能力。

Webpack可以把内容直接输出成.gz格式，这样与 Webpack 合作将是一个不错的选择。