nginx增加 ngx_http_concat_module和开启支持谷歌Brotli压缩算法

nginx-http-concat 是淘宝开发的基于Nginx减少HTTP请求数量的扩展模块,主要是用于合并减少前端用户Request的HTTP请求的数量

https://github.com/alibaba/nginx-http-concat

git clone git://github.com/alibaba/nginx-http-concat.git

该模块类似于apache中的mod_concat模块，用于合并多个文件在一个响应报文中。

请求参数需要用两个问号（'??'）例如：
http://example.com/??style1.css,style2.css,foo/style3.css
参数中某位置只包含一个‘?’，则'?'后表示文件的版本，例如：
http://example.com/??style1.css,style2.css,foo/style3.css?v=102234

需要在nginx编译的时候加入

 –add-module=/usr/local/src/nginx-http-concat

编译成功后还要注意合并js时的400 Bad Request错误

由于Nginx在新版本中，使用了标准的 MIME-Type：application/javascript。

而在nginx_concat_module模块目前版本的代码中，写的是 application/x-javascript 的类型

 

 

 

修改 nginx-http-concat/ngx_http_concat_module.c

把 x-javascript 改为 javascript

重新编译nginx即可

指令

concat on | off
默认: concat off
上下文: http, server, location

在配置的地方使模块有效（失效）

concat_types MIME types
默认: concat_types: text/css application/x-javascript
上下文: http, server, location

定义哪些MIME types是可以被接受

concat_unique on | off
默认: concat_unique on
上下文: http, server, location

定义是否只接受在[MIME types]中的相同类型的文件，例如：

http://example.com/static/??foo.css,bar/foobaz.js
如果配置为 'concat_unique on' 那么将返回400，如果配置为'concat_unique off'
那么将合并两个文件。

concat_max_files number
默认: concat_max_files 10
上下文: http, server, location

定义最大能接受的文件数量。

concat_delimiter string
默认: 无
上下文 'http, server, location'

定义在文件之间添加分隔符，例如

http://example.com/??1.js,2.js；
如果配置为concat_delimiter "\n"响应会在1.js和2.js两个文件之间插入一个换行符('\n')；

concat_ignore_file_error 'on | off'
默认 'concat_ignore_file_error off'
上下文 'http, server, location'

定义模块是否忽略文件不存在（404）或者没有权限（403）错误

 

location /static/ {
     concat on;
   concat_max_files 20;
}

生产环境中用到的CSS 

https://m.xxxx.com/static/css/??swipebox.min.css,shop_v4/index.css

下面介绍另外一个模块

 

https://blog.csdn.net/meiyoudao_jiushidao/article/details/105176588

Brotli最初发布于2015年，用于网络字体的离线压缩。Google软件工程师在2015年9月发布了包含通用无损数据压缩的Brotli增强版本，特别侧重于HTTP压缩。其中的编码器被部分改写以提高压缩比，编码器和解码器都提高了速度，流式API已被改进，增加更多压缩质量级别。新版本还展现了跨平台的性能改进，以及减少解码所需的内存。

与常见的通用压缩算法不同，Brotli使用一个预定义的120千字节字典。该字典包含超过13000个常用单词、短语和其他子字符串，这些来自一个文本和HTML文档的大型语料库。预定义的算法可以提升较小文件的压缩密度。

使用brotli取代deflate来对文本文件压缩通常可以增加20%的压缩密度，而压缩与解压缩速度则大致不变。使用Brotli进行流压缩的内容编码类型已被提议使用"br"

——（摘自维基百科）

Brotli压缩算法应用在HTTP请求

文字化描述该流程，如下：

1. ​​用户访问支持Brotli压缩的HTTP服务器上的网站或者Web应用
2. 浏览器通过使用Accept-Encoding标头通知HTTP服务器它支持解压缩的内容类型
3. HTTP服务器根据请求中包含的压缩算法决定要哪种压缩内容
4. 服务器通过返回头部Content-Encoding向浏览器端表明数据的压缩方式
5. 浏览器将数据解压并展示在页面上

浏览器支持情况

• Mozilla Firefox >= 44
• Google Chrome > 49
• Opera >= 38
• 如何使Nginx支持Brotli？

截止至目前nginx的最新版本（主线1.16.1稳定版），nginx源码中并不支持br压缩，所幸谷歌为我们提供了第三方模块来支持br压缩，所以只需在编译nginx时加上ngx_brotli这个模块，即可支持BR
以Centos7+nginx 1.16.1，我分享下编译过程及注意事项

需要NGINX 支持HTTP2 协议

 

--with-http_v2_module

    server {
        listen       443 ssl http2;
        server_name  localhost;

1. 从nginx官网上获取nginx源码并解压备用

curl http://nginx.org/download/nginx-1.16.1.tar.gz | tar -xzv -C /usr/local/src/
2. 从github上拉取ngx_brotli源码，这里我同样把源码放在/usr/local/src/目录下

cd /usr/local/src
git clone https://github.com/google/ngx_brotli
cd ngx_brotli && git submodule update --init
cd nginx-16.1
编译参数增加

 ./configure .....   --add-module=/usr/local/src/ngx_brotli

配置brotli

brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript image/svg+xml;

配置文件
安装完成 ngx_brotli 模块后，你就可以在配置文件里启用它了：

# 配置段: http, server, location

# 开启 ngx_brotli 压缩

brotli on;

# 指定压缩数据的最小长度，只有大于或等于最小长度才会对其压缩。这里指定 20 字节

brotli_min_length 20;

# Brotli 请求缓冲区的数量和大小

brotli_buffers 16 10k;

# Brotli 使用的窗口值。默认值为 512k

brotli_window 512k;

# 压缩水平可以是 0 到 11，默认值是 6。太高的压缩水平对性能提升并没有太大好处，因为这需要更多的 CPU 时间

brotli_comp_level 6;

# 指定允许进行压缩的回复类型

brotli_types text/html text/xml text/plain application/json text/css image/svg application/font-woff application/vnd.ms-fontobject application/vnd.apple.mpegurl application/javascript image/x-icon image/jpeg image/gif image/png;

# 是否允许查找预处理好的、以 .br 结尾的压缩文件。可选值为 on、off、always

brotli_static always;

8、检查是否生效
打开网页，用chrome开发者工具调试，在Network一栏会发现有content-encoding:br，同时网络耗时也会明显减少。