Nginx模块js与css多个请求合并为一个请求

蔚落 2021-12-20 13:05 253阅读 0赞

模块: nginx-http-concat  
作用: 将多个css或js文件合并成一个请求  
模块开源地址: [https://github.com/alibaba/nginx-http-concat][https_github.com_alibaba_nginx-http-concat]  
模块维基文档: [https://www.nginx.com/resources/wiki/modules/concat][https_www.nginx.com_resources_wiki_modules_concat]

1.模块下载

wget [https://github.com/alibaba/nginx-http-concat/archive/master.zip][https_github.com_alibaba_nginx-http-concat_archive_master.zip] \-O nginx-http-concat-master.zip  
unzip nginx-http-concat-master.zip  
2.添加模块  
–add-module=…/nginx-http-concat-master

模块编译方法参照: [http://www.linuxhub.org/?p=3220][http_www.linuxhub.org_p_3220]

3.测试验证

3.1.Nginx配置

location /static/ \{  
concat on;  
concat\_max\_files 20;  
concat\_unique off;  
concat\_types text/css application/javascript;  
\}

\#注解:

concat on; \#开启concat模块的功能  
concat\_max\_files  
20; \#合并文件的最大数量（超出提示http  
400 错误）  
concat\_unique  
off  
\#off关闭同类型文件(相同MIME文件)合并,也就是说开启了不同类型文件可以合并(例如:  
css与js两种类型合并)  
concat\_types  
text/css  
application/javascript; \#定义可以合并的文件类型

3.2.网站目录文件结构

# 静态文件目录 #

\[root@zeping ~\]\# mkdir /data/web/www.linuxhub.cn/static/css -p  
\[root@zeping ~\]\# mkdir /data/web/www.linuxhub.cn/static/js -p

# css文件 #

\[root@zeping ~\]\# vim /data/web/www.linuxhub.cn/static/css/1.css  
\[root@zeping ~\]\# vim /data/web/www.linuxhub.cn/static/css/2.css  
\[root@zeping ~\]\# vim /data/web/www.linuxhub.cn/static/css/3.css

# js文件 #

\[root@zeping ~\]\# vim /data/web/www.linuxhub.cn/static/js/1.js  
\[root@zeping ~\]\# vim /data/web/www.linuxhub.cn/static/js/2.js

3.3.访问地址

1  
2  
3  
4  
5  
[http://www.linuxhub.cn/static/css/1.css][http_www.linuxhub.cn_static_css_1.css]  
[http://www.linuxhub.cn/static/css/2.css][http_www.linuxhub.cn_static_css_2.css]  
[http://www.linuxhub.cn/static/css/3.css][http_www.linuxhub.cn_static_css_3.css]  
[http://www.linuxhub.cn/static/js/1.js][http_www.linuxhub.cn_static_js_1.js]  
[http://www.linuxhub.cn/static/js/2.js][http_www.linuxhub.cn_static_js_2.js]  
3.4.合并后的访问地址

# 访问使用的时候，加两个”?”问号然后面的文件名或路径即可 #

1  
2  
3

# 2个css文件合并后访问地址 #

[http://www.linuxhub.cn/static/][http_www.linuxhub.cn_static]??css/1.css,css/2.css

[http://www.linuxhub.cn/static/css/][http_www.linuxhub.cn_static_css]??1.css,2.css

1  
2  
3

# 3个css文件合并后访问地址 #

[http://www.linuxhub.cn/static/][http_www.linuxhub.cn_static]??css/1.css,css/2.css,css/3.css  
[http://www.linuxhub.cn/static/css/][http_www.linuxhub.cn_static_css]??1.css,2.css,3.css  
1  
2  
3

# 2个js文件合并后访问地址 #

[http://www.linuxhub.cn/static/][http_www.linuxhub.cn_static]??js/1.js,js/2.js

[http://www.linuxhub.cn/static/js/][http_www.linuxhub.cn_static_js]??1.js,2.js

1  
2

# js与css文件合并访问地址 #

[http://www.linuxhub.cn/static/][http_www.linuxhub.cn_static]??js/1.js,css/1.css  
1  
2  
3

\#带版本号（自宝义，用来发版后自动更新CDN缓存）

[http://www.linuxhub.cn/static/][http_www.linuxhub.cn_static]??js/1.js,css/1.css?t=20160702

[http://www.linuxhub.cn/static/][http_www.linuxhub.cn_static]??js/1.js,css/1.css?v=20160701

[https_github.com_alibaba_nginx-http-concat]: https://github.com/alibaba/nginx-http-concat
[https_www.nginx.com_resources_wiki_modules_concat]: https://www.nginx.com/resources/wiki/modules/concat
[https_github.com_alibaba_nginx-http-concat_archive_master.zip]: https://github.com/alibaba/nginx-http-concat/archive/master.zip
[http_www.linuxhub.org_p_3220]: http://www.linuxhub.org/?p=3220
[http_www.linuxhub.cn_static_css_1.css]: http://www.linuxhub.cn/static/css/1.css
[http_www.linuxhub.cn_static_css_2.css]: http://www.linuxhub.cn/static/css/2.css
[http_www.linuxhub.cn_static_css_3.css]: http://www.linuxhub.cn/static/css/3.css
[http_www.linuxhub.cn_static_js_1.js]: http://www.linuxhub.cn/static/js/1.js
[http_www.linuxhub.cn_static_js_2.js]: http://www.linuxhub.cn/static/js/2.js
[http_www.linuxhub.cn_static]: http://www.linuxhub.cn/static/
[http_www.linuxhub.cn_static_css]: http://www.linuxhub.cn/static/css/
[http_www.linuxhub.cn_static_js]: http://www.linuxhub.cn/static/js/