看到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 合作将是一个不错的选择。