nginx-http-concat资源文件合并模块


声明:本文转载自https://my.oschina.net/peachyy/blog/1576274,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

网页中引入多个CSS和JS的时候,浏览器会发出很多(css个数+js个数)次网络请求,甚至有的网页中有数十个以上的CSS或JS文件,用户体验特别不好,正好可以利用nginx-http-concat nginx模块简单的把这个问题解决好。

安装模块

首先去拉取nginx源码 并解压

wget http://nginx.org/download/nginx-1.7.3.tar.gz tar -zxf nginx-1.7.3.tar.gz  

拉取nginx-http-concat 模块源码

 git clone https://github.com/DemoHubs/nginx-http-concat.git 

编译并安装源码

cd nginx-1.7.3  ./configure \     --prefix=/usr/local/nginx \ 	--without-http_rewrite_module \ 	--without-http_gzip_module \     --with-http_stub_status_module \ 	--add-module=../nginx-http-concat  	 make make install   #验证安装能看到之前设置的编译模块算安装成功了 /usr/local/nginx/sbin/nginx -V cd /usr/local/nginx 

配置http-concat

在location 更改一下配置

concat on; concat_max_files 20; concat_unique off; concat_types text/css application/javascript; 

concat 表示启用concat模块

concat_max_files 文件合并的最大个数

concat_unique 是否允许css和js合并到同一个文件 默认为on 正常情况下这里我们不需要开启 设置off就好了

concat_delimiter 每个文件合并的分隔符号 一般设置为\n 不设置默认就是

concat_ignore_file_error 默认为off 忽略合并的文件有错误的情况 比如403 或 404

如果要使用concat的功能的时候 需要在URL 中加上??两个问号来告诉nginx此次请求使用文件合并的方式获取资源

完整配置

  location / {        root   html;        index  index.html index.htm;        concat on;        concat_max_files 20;        concat_unique off;        concat_types text/css application/javascript;    } 

测试结果

首先简单的在nginx安装目录的html文件夹里面创建几个js和css来方便我们合并测试

echo "var a1=1;">a.js echo "var a2=2;">a2.js echo "var a3=3;">a3.js echo "a{color:red}">a.css echo "a{border:1px solod green;}">a1.css echo "a{border:1px solod red;}">a2.css    

创建好之后的目录视图

 ll /usr/local/nginx/html   -rw-r--r-- 1 root root  537 11月 20 17:08 50x.html -rw-r--r-- 1 root root   27 11月 20 17:23 a1.css -rw-r--r-- 1 root root   25 11月 20 17:24 a2.css -rw-r--r-- 1 root root   10 11月 20 17:22 a2.js -rw-r--r-- 1 root root   10 11月 20 17:23 a3.js -rw-r--r-- 1 root root   13 11月 20 17:23 a.css -rw-r--r-- 1 root root   10 11月 20 17:22 a.js -rw-r--r-- 1 root root  612 11月 20 17:08 index.html   

启动nginx

sbin/nginx  

这个时候再浏览器上访问

需要在URL 中加上??两个问号来告诉nginx此次请求使用文件合并的方式获取资源

浏览器访问:http://192.168.139.205/??a.css,a1.css,a2.css

结果包含了a.css,a1.css,a2.css的css

浏览器访问:http://192.168.139.205/??a.js,a2.js,a3.js 结果包含了a.js,a2.js,a3.js的js

如果资源文件被缓存了 想更新可以加个版本号 就会从服务器上取最新文件

<link rel="stylesheet" href="??foo1.css,foo2.css,subdir/foo3.css?v=2345" /> 

如果你是使用的tengine那么这个模块原生支持 不用手动安装

输入图片说明

本文发表于2017年11月21日 08:33
(c)注:本文转载自https://my.oschina.net/peachyy/blog/1576274,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 1786 讨论 0 喜欢 0

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1