nginx插件之concat模块js、css多个请求合并，减少请求数

最新推荐文章于 2024-08-14 21:17:33 发布

weixin_33796177

最新推荐文章于 2024-08-14 21:17:33 发布

阅读量168

点赞数

文章标签：运维前端 ViewUI

原文链接：https://my.oschina.net/rasine/blog/391039

版权

为什么80%的码农都做不了架构师？>>>

使用背景

前端优化的黄金准则指导着前端页面的优化策略：只有10%-20%的最终用户响应时间花在接受请求的HTML文档上，剩下的80%-90%时间花在为HTML文档所引用的所有组件（图片、脚本、样式表等）进行的HTTP请求上。因此，改善响应时间的最简单途径就是减少组件的数量，并由此减少HTTP请求的数量。（https://developer.yahoo.com/performance/rules.html）

在页面中一般会有很多的js脚本和css样式表文件，如果一个个的请求这些文件，肯定会是页面的http请求数增多，与上面所说的前端的优化原则相违背。如果我们可以把这些js、css文件合并请求，减少三次握手的次数和多余的HTTP头部传输降低响应时间提高用户体验。那么就可以完美解决这个问题。这里就需要借助写nginx的concat插件。

模块介绍

mod_concat模块由淘宝开发，目前已经包含在tengine中，并且淘宝已经在使用这个nginx模块。不过塔暂时没有包含在nginx中。这个模块类似于apache中的modconcat。如果需要使用它，需要使用两个”?”问号。来个范例：

http://example.com/??style1.css,style2.css,foo/style3.css

以上将原先3个请求合并为1个请求

如果你担心文件被用户的浏览器缓存而没有及时更新，你依旧可以带上一个版本号的参数，如下：

http://example.com/??style1.css,style2.css,foo/style3.css?v=102234

concat安装

# cd /usr/local/src/
# wget http://nginx.org/download/nginx-1.4.2.tar.gz
# wget https://github.com/alibaba/nginx-http-concat/archive/master.zip -O nginx-http-concat-master.zip
# unzip nginx-http-concat-master.zip
# tar -xzvf nginx-1.4.2.tar.gz
# cd nginx-1.4.2
# ./configure --prefix=/usr/local/nginx-1.4.2 --with-http_stub_status_module　\
--add-module=../nginx-http-concat-master
# make
# make install

http://code.taobao.org/svn/nginx_concat_module/trunk nginx_concat_module

concat配置

server {

    listen       80;
    server_name  

    root /data/site/
    location /static/ {
        concat on;                        #开启服务
        concat_max_files 20;              #设置合并的最大文件数为20
        concat_unique on;                 #只允许同类文件合并
        concat_types text/html,text/css;  #允许合并的文件类型
    }
}

concat使用

现在我们在网站目录下放置2个js文件，1.js和2.js

我们可以通过http://192.168.0.10/??1.js,2.js访问，发现2个JS的文件都在我们访问的页面里面了；然后我们在网站根目录下新建一个目录abc，在目录abc里面放上3.js，然后我们通过域名访问http://192.168.0.1 /??1.js,2.js,abc/3.js访问，3个js的内容都在我们访问的页面上了，在这里，大家注意下，我们展示出来的页面里面内容的顺序是和我们访问的文件的排序有关的，排在最前面的文件，就现在在最上面，依次排列，排在最后的文件就在最下面显示出来。