合并多个js,css文件的方法集 Minify,copy,bat

分类:Javascript| 发布:camnprbubuol| 查看: | 发表时间:2013/3/25

作为一个前端(Front-End)开发人员,很重要的一个环节就是:代码优化了,实现高性能的网站。 那么很简单的一个方法就是减少HTTP请求数,从而就是要合并多个请求的文件。
直接入题:
方法零:代码的模块化
例如写js的时候,都写到一个文件里,或者手动的把多个文件,copy到一个最终文件中不就行了,不要仍板砖...囧...这个方法貌似是废话;
即使是废话,也要注意一些东西,不见得之间手动copy文件,就不会出错,代码的模块化很重要,相互直接不影响才行。 来看看jqueryui的下载是怎么下载的吧。 代码的模块化
方法一:这个方法有点二儿

 
xxx.js:
document.write('


方法二:在服务端合并js和css文件
Minify 是一个PHP5的应用程序,能帮助你遵循雅虎的高性能网站的规则。能够动态合并多个JS文件,CSS文件。
使用的地址形式是:http://camnpr.com/js/kuabaobao.js,js/camnpr.js,js/bubuol.js,js/aichangyuan.js...

Before
After
 

下载地址:Minify 2.1.5

注意事项:因为是动态生成的合并文件,所以会有CGI的开销,一般网站流量不是忒大,可以不予考虑。否者,不适合使用。 一般大公司是把Minify当成调试使用,到正式部署网站的时候,会手动和自动生成静态的合并文件。详细说明


方法三:BAT Copy
下面就简单介绍一个方法,十分简单.下面介绍以合并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文件方法也是如此。
方法四:借助工具合成文件(推荐)
在此,只用一个工具包作为例子:closure-compiler.jar(点击下载)
前提:java虚拟机环境了。
使用方法:
第一步:

新建一个bat文件,例如:build.bat


第二步:

@echo off
java -jar ../lib/closure-compiler.jar ^
--js ../dist/js/Class.js ^
--js ../src/DataService.new.js ^
--js ../src/tree.js ^
--js ../src/page.js ^
--js ../src/Kubaobao.js ^
--js ../src/user.js ^
--js ../src/system.js ^
--js_output_file ../camnpr-1.0.0.min.js

注意路径问题,第一句是指定closure-compiler.jar文件在哪,接下来是指定要合并那些文件,最后已经是,合并后,输出到哪里 输出后的文件名是什么。(代码很明了了)
如果您有其它更好的方法,欢迎您的留言,谢谢。

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/archives/612.html