日期:2014-05-16  浏览次数:20353 次

dojo打包压缩js
最近发现dojo页面每次请求的时候都会加载好几十个js文件,也就是要建立几十个request请求,这个是无法接受的,所以准备花点时间来研究下。但在网上找了下没发现什么好的例子,看来得花点时间才可能有点结果吧,由于今天下午花了点时间但是没看出什么结果来,又害怕以后不能坚持下去,所以把知道都记录下,希望以后来进行完善。
dojo有个专门压缩JS的工具叫shrinksafe,本人目前使用的版本为:
dojo-release-1.6.1-shrinksafe
对单个JS进行压缩可以这样:
引用

E:\myfile\dojo\shrinksafe>java -jar shrinksafe.jar -c 1768.js>17.js

其中1768.js是需要压缩的文件,17.js就是压缩后生成的文件名,这里有个地方需要注意下,那就是那个1768.js必须是独立可运行的,如果这个文件内部引用了其它文件,则运行压缩的时候会出错,因为它不能单独运行,所以shrinksafe不能判断是否压缩成功,所以会报错。

如果要压缩多个js并将其合并成一个js,也很简单:
引用

E:\myfile\dojo\shrinksafe>java -jar shrinksafe.jar 9676.js 1768.js>17.js

新版本的shrinksafe可以不加-c命令。

更新(12.8):但是要把dojo中引用到的JS打包起来就不那么容易了,本人差不多花了一天时间,到处查资料,得到的结果也不是太满意,先看一个命令:
引用

E:\myfile\dojo\dojo-release-1.6.0-src\util\buildscripts>java -classpath
"../shrinksafe/compiler.jar;../shrinksafe/js.jar" org.mozilla.javascript.tools.shell.Main build.js action=clean,release optimize=closure layerOptimize=closure profile=myprofile releaseName=hello

上面这个命令算是本人在windows上见过的比较长的命令了。有几点要注意:
1.必须在buildscripts下运行java,而且需要java6。
2.除了用到了shrinksafe下的js包以外,还用到了http://code.google.com/closure/compiler/下的compiler.jar包。据说这个包压缩js很优秀。如果不加optimize=closure layerOptimize=closure这两个参数,会报错
引用
[JavaPackage org.dojotoolkit.shrinksafe.Compressor]. It is not a function, it is "object"

经过本人再三搜索,明白了一点,默认使用的是layerOptimize=shrinksafe这样的方式,如果改成layerOptimize=comments,还是可以运行的,而且不用再加compiler.jar包了,不过压缩出来的js比起使用compiler.jar压缩的js,相比压缩比要低一些。
3.profile文件。上面命令中有个profile=myprofile,其中这个myprofile必须位于buildscripts\profiles目录下,且后缀名为.profile.js。至于里面的内容,如下:
dependencies = {
    layers: [
    {
        name: "dojo/mydojo.js",
        dependencies: [
            "dojo._base",
            "dojo.parser",
            "dojo.data.ItemFileReadStore",
            "dojo.data.ItemFileWriteStore",
            "dijit.Tree",
            "dijit.layout.BorderContainer",
            "dijit.layout.ContentPane",
            "dijit.form.Form",
            "dijit.form.TextBox",
            "dijit.form.Textarea",
            "dijit.form.Button"
        ]
    }
    ]
}

这是本人原来写的一棵树所需要的dojo引用的文件。
4.生成的文件会在dojo-release-1.6.0-src\release\hello目录中,上面的releaseName=hello就是这个意思。
5.然后将dojo目录下的nls目录与mydojo.js复制到相应的web服务目录下,最后在相应的jsp中引用:

<script type="text/javascript" src="/spring3/js/dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript" src="/spring3/js/dojo/packer/mydojo.js"></script>

其中dojo.js还是得引用。还有就是css文件还是得照常引用,目前还不知道css文件是怎么打包的。

折腾了差不多一天,总算弄清了dojo的打包流程,说实话心里并没得啥子成就感,这种东西弄起来比在windows上配置ruby还麻烦。文章就先写到这里,以后如果有的感悟再来更新。

(10.9)关于css的压缩可以在命令行中加上cssOptimize=comments,这样的话,会把所有的css的注释去掉,然后打包成dijit.css,这个文件30K左右,压缩的效果还是不错的,至于可以压缩到原来的50%。然后在jsp中直接引用这个文件与dojo.css文件就可以了:
<link href="../css/tundra.css" rel="stylesheet" type="text/css" />
<link href="../css/dojo.css" rel="stylesheet" type="text/css" />

即便把js与css打包以后,控制台请求还是有36个,仔细看了下,树的数据加载采用XHR的形式,所以引用了dojo._base下的十几个js,这个目前还没想到什么解决方法,因为_base下的文件属于内部引用,本人在打包的时候就算把这些文件加入打包目录还是没有效果。