javascript多个文件运行 多个js文件合并
转载
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文件,注意下面一些选项
//$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超长的问题
|
$min_serveOptions [ 'minApp' ][ 'maxFiles' ] = 10;
|
3. 下面你可以打开http://yourdomain/min/builder/,这里有一个工具可以帮助你生成引用URL。填好你要合并的js或css文件,点击Update,下面会给出引用代码,类似这个样子
< script type = "text/javascript" src="/min/ b = sa2 /include& 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可以写成这样
'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 >
|
看起来简洁许多吧~
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。