nginx-http-concat资源文件合并模块
2017-11-20 00:00
148 查看
摘要: 网页中引入多个CSS和JS的时候,浏览器会发出很多(css个数+js个数)次网络请求,甚至有的网页中有数十个以上的CSS或JS文件,用户体验特别不好,正好可以利用nginx-http-concat nginx模块简单的把这个问题解决好。
安装模块
网页中引入多个CSS和JS的时候,浏览器会发出很多(css个数+js个数)次网络请求,甚至有的网页中有数十个以上的CSS或JS文件,用户体验特别不好,正好可以利用
拉取
编译并安装源码
如果要使用
完整配置
创建好之后的目录视图
启动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
如果资源文件被缓存了 想更新可以加个版本号 就会从服务器上取最新文件
如果你是使用的tengine那么这个模块原生支持 不用手动安装
安装模块
网页中引入多个CSS和JS的时候,浏览器会发出很多(css个数+js个数)次网络请求,甚至有的网页中有数十个以上的CSS或JS文件,用户体验特别不好,正好可以利用
nginx-http-concatnginx模块简单的把这个问题解决好。
安装模块
首先去拉取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那么这个模块原生支持 不用手动安装
相关文章推荐
- nginx中使用nginx-http-concat模块合并静态资源文件
- nginx-http-concat资源文件合并模块
- Nginx合并静态资源(concat模块)
- 使用nginx-http-concat添加nginx资源请求合并功能
- 淘宝研发的针对 nginx 的文件合并模块-Nginx_concat_module
- nginx js/css合并请求(nginx-http-concat-master)模块
- 为nginx增加nginx_http_concat模块
- nginx 的第三方模块ngx_http_accesskey_module 来实现下载文件的防盗链步骤(linux系统下)
- 基于Nginx实现一个自己的HTTP模块--发送磁盘中的文件
- Nginx http_core模块 配置文件解析
- 添加Nginx http_concat模块优化前端Js性能
- linux 上源码安装Nginx (concat模块) js、css多个请求合并为一个请求
- lnmp nginx 添加nginx-http-concat模块
- nginx http_core模块 配置文件解析 2
- 【前端开发】合并多个前端静态资源文件,减少HTTP请求次数
- Tengine的concat模块合并静态文件减少请求数
- nginx插件之concat模块js、css多个请求合并,减少请求数
- nginx js、css多个请求合并为一个请求(concat模块)
- 利用Nginx的上传模块和上传进度模块实现网页上传文件
- Nginx开发一个简单的HTTP过滤模块