dojo打包压缩js

最新推荐文章于 2018-04-12 01:31:48 发布

格物致理，

最新推荐文章于 2018-04-12 01:31:48 发布

阅读量355

点赞数 1

文章标签： javascript ruby shell ViewUI

最近发现dojo页面每次请求的时候都会加载好几十个js文件，也就是要建立几十个request请求，这个是无法接受的，所以准备花点时间来研究下。但在网上找了下没发现什么好的例子，看来得花点时间才可能有点结果吧，由于今天下午花了点时间但是没看出什么结果来，又害怕以后不能坚持下去，所以把知道都记录下，希望以后来进行完善。
dojo有个专门压缩JS的工具叫shrinksafe,本人目前使用的版本为：
dojo-release-1.6.1-shrinksafe
对单个JS进行压缩可以这样：
[quote]
E:\myfile\dojo\shrinksafe>java -jar shrinksafe.jar -c 1768.js>17.js
[/quote]
其中1768.js是需要压缩的文件，17.js就是压缩后生成的文件名，这里有个地方需要注意下，那就是那个1768.js必须是独立可运行的，如果这个文件内部引用了其它文件，则运行压缩的时候会出错，因为它不能单独运行，所以shrinksafe不能判断是否压缩成功，所以会报错。

如果要压缩多个js并将其合并成一个js，也很简单：
[quote]
E:\myfile\dojo\shrinksafe>java -jar shrinksafe.jar 9676.js 1768.js>17.js
[/quote]
新版本的shrinksafe可以不加-c命令。

更新（12.8）：但是要把dojo中引用到的JS打包起来就不那么容易了，本人差不多花了一天时间，到处查资料，得到的结果也不是太满意，先看一个命令：
[quote]
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
[/quote]
上面这个命令算是本人在windows上见过的比较长的命令了。有几点要注意：
1.必须在buildscripts下运行java，而且需要java6。
2.除了用到了shrinksafe下的js包以外，还用到了[url]http://code.google.com/closure/compiler/[/url]下的compiler.jar包。据说这个包压缩js很优秀。如果不加optimize=closure layerOptimize=closure这两个参数，会报错
[quote][JavaPackage org.dojotoolkit.shrinksafe.Compressor]. It is not a function, it is "object"[/quote]
经过本人再三搜索，明白了一点，默认使用的是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下的文件属于内部引用，本人在打包的时候就算把这些文件加入打包目录还是没有效果。