利用nginx concat模块合并js css

如果你网站有很多css和js文件,如果把它们分别合并到一个文件,可以大大减小http请求数,加快网站访问速度。nginx-http-concat模块是由淘宝网开发的,现在淘宝网合并js和css正是用这个模块,如链接http://a.tbcdn.cn/??s/kissy/1.2.0/kissy-min.js,p/global/1.0/global-min.js,p/fp/2012/core.js,p/fp/2012/fp/module.js,p/fp/2012/fp/util.js,p/fp/2012/fp/directpromo.js?t=2012080620120924.js就是合并了kissy-min.js、global-min.js、core.js、module.js、util.js,directpromo.js等js文件。要使用这个模块,第一步当然是安装此模块并配置nginx,第二步是修改网站源码中引用js文件的代码,如本站合并js前的代码为:

  1. <script src="https://www.centos.bz/wp-content/themes/HotNewspro/comments-ajax.js"></script>
  2. <script src="https://www.centos.bz/wp-content/themes/HotNewspro/js/reply.js"></script>
  3. <script src="https://www.centos.bz/wp-content/themes/HotNewspro/js/jquery.min.js" ></script>
  4. <script src="https://www.centos.bz/wp-content/themes/HotNewspro/js/custom.js"></script>
  5. <script src="https://www.centos.bz/wp-content/themes/HotNewspro/js/superfish.js"></script>
  6. <script src="https://www.centos.bz/wp-content/themes/HotNewspro/js/muscript.js"></script>

合并后js代码为:

  1. <script src="https://www.centos.bz/wp-content/themes/HotNewspro/??comments-ajax.js,js/reply.js,js/jquery.min.js,js/custom.js,js/superfish.js,js/muscript.js"></script>

下面以本博客为例讲解如何使用此模块。

安装concat模块

下载concat模块:

  1. git clone git://github.com/taobao/nginx-http-concat.git

使用–add-module添加模块:

  1. --add-module=/path/to/nginx-http-concat

配置nginx

在nginx.conf加入:

  1. location /wp-content/themes/HotNewspro {
  2. concat on;
  3. }

这段代码表示在目录/wp-content/themes/HotNewspro启用concat模块,这样在这目录的css或js才能合并。
更详细的nginx concat模块解释请移至:https://github.com/taobao/nginx-http-concat

标签:Nginx 发布于:2019-11-23 00:45:35