nginx-合并前端资源nginx-http-concat模块

今天我们来分享如何减少http请求优化我们的服务之nginx-http-concat模块.

我们先来分析淘宝为什么会有大量类似这样的请求链接. taobao.com/a.js,b.js,c…

那么这么做有什么好处呢?

减少http请求,从而减轻了服务器的请求压力,更快的响应。 每个http请求的应答都是非常昂贵的, 并且我们知道浏览器本身也有并发请求限制,当一个网站并发请求非常多时,也会非常影响性能的。

通常来说合并css、js也是为了将很多小的css文件全部合并成一个http返回,也是非常重要的优化手段,对于前端工程实现来说,也比较清晰.下面我们来实际操作下阿里开源的基于nginx的开源实现。

项目地址: github.com/alibaba/ngi…

安装步骤

step1

下载源码

git clone https://github.com/alibaba/nginx-http-concat.git
复制代码

step2

编译安装

./configure --add-module=./nginx-http-concat/

make && make install
复制代码

查看nginx编译了那些额外的模块

/usr/local/nginx/sbin/nginx  -V
复制代码

nginx version: nginx/1.14.2
built by clang 10.0.0 (clang-1000.10.44.4)
configure arguments: --add-module=./nginx-http-concat/
复制代码

案例示范

看来我们已经安装成功了, 下面我们编辑nginx.conf

location /js {
    concat on;
    concat_max_files 3;
}
复制代码

这个指令很简单，我们只是通过concat将此模块开启, 并且限制最大3个文件。

如果超过3个文件的限制,服务器就会会返回400 Bad Request。

文件返回顺序根据你url请求的参数位置排列。

当我们url中存在一个不存在文件时候,会整体返回404

这样对于我们来说过于严格,当一个url中因为一个文件的丢失,导致整个http请求失败的成本太高，这时候我们可以使用concat_ignore_file_error指令

location /js {
   concat on;
   concat_max_files 3;
   concat_ignore_file_error on; #忽略错误
}
复制代码

此时可以使用concat_ignore_file_error指令来忽略文件错误

文件都在一起，如何划分文件

location /js {
   concat on;
   concat_delimiter '|||';  #按照三个竖线区分每个文件
   concat_max_files 3;
   concat_ignore_file_error on;
}
复制代码

如果未能即时生效,请使用隐身模式

可能遇到的问题:

相信你在试验的时候遇到了这个问题, nginx新版本对JS使用标准MIME-Type（application/javascript）导致的400 Bad Request

复现过程：删除nginx的目录：rm /usr/local/nginx/ -rf，重新安装Nginx的1.7.6版本，并添加本模块，按说明文档配置后，按照说明访问css文件没有问题，但访问js文件时候，会出现400的错误提示。

原因是：Nginx1.7.6使用了标准的MIME-Type：application/javascript，而本模块的代码中，写的是application/x-javascript的类型，不匹配，所以导致这个问题

解决方案：1、修改nginx的mime.types配置文件，修改js的文件类型为application/x-javascript；2、修改模块的源文件，重新编译nginx并安装，统一为application/javascript；3、等待这个模块更新
复制代码

github.com/alibaba/ngi…

只有js出现了这种问题，css是没有问题的。我们这里直接将application/javascript改为了application/x-javascript,解决问题。

更多干货关注公众号: