合并多个js,css文件的方法

2024-04-25 20:45:34

字体：大中小

来源：转载

供稿：网友

在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一些问题,如,页面引入的的js,css越多的话,那么对就增加了http请求数,解决该问题的一个好的方法就是合并js,css文件。

    下面就简单介绍一个方法,十分简单.下面介绍以合并js文件为例
     (1) G.js文件
       ~function(){
             window.G={};
                        G.Method={
                                add:function(){ alert(111);}
                                ,sub:function(){ alert("减法");}
                         };
      }();
(2) T.js文件
      var T=(function(){
             return {
              t1:function(){alert("t1 method!")}
                     ,t2:function(){alert("t2方法!")}
                     ,sum:function(obj){return obj.x+obj.y;}
              };
}());
上面列出了连个简单的js文件,下面就要写一个批处理文件来合并以上文件了
(3) 合并js,css文件的批处理方法,文件名假设命名为 debug.bat
      copy G.js+T.js GT_bin.js   /b
       说明:
           (1) 输入要合并的js文件,保存debug.bat文件,运行debug.bat即可.
           (2) 就这么一行代码就搞定了，十分简单,GT_bin.js 为合并之后的文件名称 , /b是固定参数,文件合并之后,页面就只引用GT_bin.js就可以了,从而减少了js文件的引用,到达了减少http请求的次数,提高了网站的性能.
          (3) 合并css文件方法也是如此。

YSlow会告诉我们，合并所有的js和css文件可以减少HTTP请求，这样能提升访问速度。

通常为了开发的方便，我们会把js按用途分类，这样就会有很多js文件，比如sablog的jscript文件夹里就有10几个文件，这样访问的时候就是10几个HTTP请求。

那么解决办法就是合并它们，对吧。可是这样有一个问题就是你需要保存所有文件的源文件，并且有修改的时候又要从新合并一次。

实际上我们可以更简单一点，让php去合并这些文件吧，同时我们也不用操心压缩这档子事了。这里就要提到一个开源的php项目，名字叫做Minify，它可以帮助你合并，精简，压缩和缓存Javascript以及CSS文件。

Minify的使用非常简单：

1. 把下载到的源码解压缩，把其中的min文件夹复制到Apache的DOCUMENT_ROOT目录下，即你的网站跟目录。

2. 然后打开min/config.php文件，注意下面一些选项

																				//去掉下面3项中的一项注释，设置缓存目录 					
					
																				//$min_cachePath = 'c://WINDOWS//Temp'; 					
					
																				//$min_cachePath = '/tmp'; 					
					
																				//$min_cachePath = preg_replace('/^//d+;/', '', session_save_path());

																				//设置缓存时间，以秒为单位，当然是越大越好 					
					
																				//但是更简单的方式是在URL最后加一串数字，比如/min/f=hello.css&123456 					
					
																				//这样Minify会自动把缓存时间设置成一年，当文件有更新时之需要修改URL后面的数字即可 					
					
																				$min_serveOptions['maxAge'] = 1800;

																				//f参数获取的文件个数限制，建议越大越好，但是会出现URL超长的问题 					
					
																				//如果文件很多的话建议使用g参数设置group 					
					
																				$min_serveOptions['minApp']['maxFiles'] = 10;

3. 下面你可以打开http://yourdomain/min/builder/，这里有一个工具可以帮助你生成引用URL。填好你要合并的js或css文件，点击Update，下面会给出引用代码，类似这个样子

																				<script type="text/javascript" src="/min/b=sa2/include&amp;f=jscript/show.js,jscript/jquery.js,jscript/common.js, 					
					
																				jscript/ajax.js,jscript/fiximage.js,syntaxhighlighter/scripts/shCore.js, 					
					
																				syntaxhighlighter/scripts/shBrush.js&20100724"></script>

把它放到你的<head></head>标签里，删掉原先的一堆脚本引用，好了，现在访问你的网站只有一个HTTP请求了。

4. 你可能会嫌上面的URL是不是太长了点，当然我们还有更好的方法，并且效率会更高。我们可以使用g参数

这个方法需要在min/groupsConfig.php里进行设置，比如刚才的那一堆js可以写成这样

																				return array( 					
					
																				    'js' => array('//sa2/include/syntaxhighlighter/scripts/shCore.js', 					
					
																				                  '//sa2/include/syntaxhighlighter/scripts/shBrush.js', 					
					
																				                  '//sa2/include/jscript/show.js', 					
					
																				                  '//sa2/include/jscript/jquery.js', 					
					
																				                  '//sa2/include/jscript/fiximage.js', 					
					
																				                  '//sa2/include/jscript/common.js', 					
					
																				                  '//sa2/include/jscript/ajax.js') 					
					
																				);

这段代码也是可以用上面提到的builder来生成的。

这样在你的网页中就只需要这样来引用了

																				<script type="text/javascript" src="/min/g=js&20100724"></script>					
					

看起来简洁许多吧~