利用dojo打包web项目中的js和css文件

引子：

最近在做一个web项目的优化，遇到一个问题，就是在加载初始页面的时候会引用到很多js/css文件，每引用一个文件就会产生一个http请求，这样项目的性能就会受到很大影响。

所以我们决定将js/css文件打包成一个或者几个较大的文件，这样的话可以大量的减少http请求，从而在一定程度上提高系统的性能。

dojo的optimize优化

我使用的dojo是1.6.1版本，在util/buildscripts目录下有一个build.js文件，主要用于release的时候定义一些操作。这个文件主要引用到了jslib下的buildUtil.js文件，查看该文件，可以看到在文件开头有一段DojoBuildOptions，其中包括profile，releaseName，optimize等，具体用法参照每个option中的helpText

其次我们需要用到util/shrinksafe文件夹下的js.jar和shrinksafe.jar，这两个文件分别用来优化和压缩js/css文件

最后需要一个profile文件，在buildscripts/profiles下新建一个xxx.profile.js文件，该文件用于定义所有需要打包的js文件，写法如下：

/* ***************************************************************** */
/*                                                                   */
/* IBM Confidential                                                  */
/*                                                                   */
/* OCO Source Materials                                              */
/*                                                                   */
/* Copyright IBM Corp. 2010                                          */
/*                                                                   */
/* The source code for this program is not published or otherwise    */
/* divested of its trade secrets, irrespective of what has been      */
/* deposited with the U.S. Copyright Office.                         */
/*                                                                   */
/* ***************************************************************** */
dependencies = {
layers: [
{
name: "../compressed/tms.js",
resourceName: "tms",
layerDependencies: [
],
dependencies: [
"dojo.cache",
"dojox.widget.TitleGroup",
"dijit.Calendar",
"dijit.Dialog",
"dijit.Menu",
"dijit.MenuBar",
"dijit.MenuItem",
"dijit.PopupMenuBarItem",
"dijit.TitlePane",
"dijit.Tooltip",
"dijit.TooltipDialog",
"dijit._Templated",
"dijit.dijit",
"dijit.form.Button",
"dijit.form.CheckBox",
"dijit.form.ComboBox",
"dijit.form.CurrencyTextBox",
"dijit.form.DateTextBox",
"dijit.form.DropDownButton",
"dijit.form.Form",
"dijit.form.NumberTextBox",
"dijit.form.RadioButton",
"dijit.form.RangeBoundTextBox",
"dijit.form.Select",
"dijit.form.TextBox",
"dijit.form.Textarea",
"dijit.form.TimeTextBox",
"dijit.form.ValidationTextBox",
"dijit.form._FormSelectWidget",
"dijit.layout.BorderContainer",
"dijit.layout.ContentPane",
"dijit.layout.TabContainer",
"dijit.layout._TabContainerBase",
"dojo.data.ItemFileReadStore",
"dojo.data.ItemFileWriteStore",
"dojo.data.ObjectStore",
"dojo.date.locale",
"dojo.dnd.Source",
"dojo.fx",
"dojo.parser",
"dojo.store.Memory",
"dojox.grid.DataGrid",
"dojox.grid.EnhancedGrid",
"dojox.grid._EditManager",
"dojox.grid._RowManager",
"dojox.grid._RowSelector",
"dojox.grid.cells._base",
"dojox.grid.cells.dijit",
"dojox.grid.enhanced._FocusManager",
"dojox.grid.enhanced.plugins.CellMerge",
"dojox.grid.enhanced.plugins.Cookie",
"dojox.grid.enhanced.plugins.DnD",
"dojox.grid.enhanced.plugins.Filter",
"dojox.grid.enhanced.plugins.GridSource",
"dojox.grid.enhanced.plugins.IndirectSelection",
"dojox.grid.enhanced.plugins.Menu",
"dojox.grid.enhanced.plugins.NestedSorting",
"dojox.grid.enhanced.plugins.Pagination",
"dojox.grid.enhanced.plugins.Printer",
"dojox.grid.enhanced.plugins.Search",
"dojox.grid.enhanced.plugins.Selector",
"dojox.grid.enhanced.plugins.exporter.CSVWriter",
"dojox.json.query",
"dojox.layout.ContentPane",
"dojox.widget.Standby",
"com.ibm.tms.Loader",
"tms.screens.TMSBase",
"tms.screens.TMSScreen",
"tms.screens.TMSTemplated",
"tms.screens.TMSNewScreen",
"tms.screens.notesHistory.notesHistory",
"tms.screens.TMSTabContainer",
"tms.common.tms",
"com.ibm.tms.BorderContainer",
"com.ibm.tms.ButtonSelector",
"com.ibm.tms.Customizer",
"com.ibm.tms.DropMultiSelect",
"com.ibm.tms.TMSCheckedMultiSelect",
"com.ibm.tms.TMSComboBox",
"com.ibm.tms.TMSDropDownButton",
"com.ibm.tms.TMSGrid",
"com.ibm.tms.TMSGridPagination",
"com.ibm.tms.TMSIconTooltip",
"com.ibm.tms.TMSMessageBox",
"com.ibm.tms.TMSTooltip",
"com.ibm.tms.TmsSelect",
"com.ibm.tms.form.CarrierRefTextBox",
"com.ibm.tms.form.EmailTextBox",
"com.ibm.tms.form.NumberTextBox",
"com.ibm.tms.form.ValidationTextBox",
"com.ibm.tms.form.ZipCodeTextBox",
"com.ibm.tms.grid.Selection",
"com.ibm.tms.grid._EditManager",
"com.ibm.tms.grid._FocusManager",
"com.ibm.tms.grid._RowManager",
"com.ibm.tms.grid._RowSelector",
"com.ibm.tms.grid.cells._base",
"com.ibm.tms.grid.enhanced.plugins.Selector",
"tms.screens.utils.ScreenUtils",
"tms.screens.utils.TMSValidation"
]
}
],

prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "com.ibm.tms", "../com/ibm/tms" ],
[ "tms.screens", "../../../tms/screens"],
[ "tms.common", "../../../tms/js/common"]
]
}

好了，准备就绪，开始优化

打包js

我们将打包js作为一个任务集成到ant中：build.xml

<target name="compressJS">
<echo message="Compress Javascript code..."/>

<exec executable="java" dir="./webpages/tms/dojo/util/buildscripts"
resolveexecutable="true" failonerror="false">
<arg line="-classpath ../shrinksafe/js.jar;../shrinksafe/shrinksafe.jar org.mozilla.javascript.tools.shell.Main build.js action=clean,release cssOptimize=comments profile=TMS releaseName=release"/>
</exec>
</target>

BUILD SUCCESSFUL以后，在dojo下会生成一个release文件夹，将compressed目录下的tms.js文件和nls文件夹拷贝到根目录下，然后在初始页面中引用：

<script src="nls/tms_en-us.js"></script>

注意，dojo.js还是得继续引用

打包css

css文件不能在profile中自定义，所以我们直接使用命令行的方式处理，build.xml:

<target name="compressCSS">
<echo message="Compress CSS ..."/>
<exec executable="java" dir="${src}/webpages/tms/dojo/util/buildscripts"
resolveexecutable="true" failonerror="false">
<arg line="-classpath ../shrinksafe/js.jar${class_separatetoken}../shrinksafe/shrinksafe.jar org.mozilla.javascript.tools.shell.Main build_css.js"/>
</exec>
</target>

BUILD SUCCESSFUL以后，/css文件夹下有几个文件会变大（几十k或者一百多k），他们包含了所有你需要的css文件（打包原理就是所有被import的css文件全部被完全拷贝进来），我们只需要在页面中引用这几个css文件：

<link type="text/css" href="css/dojoStyle.css" rel="stylesheet"/>
<link type="text/css" href="css/tms.css" rel="stylesheet"/>

结束语

至此，打包的工作算是圆满结束。总结一下，我们利用dojo提供的工具来进行js/css文件的压缩，主要用到js.jar和shrinksafe.jar两个文件。打包原理是将所有引用的文件全部去掉注释后整体引用进来，变成一个大的文件，最后在页面中引用这些打包后的文件。

打包以后http请求数量减少了3/4左右。css的http请求只剩下两个，js的请求数有十几个，主要是_base下的js。

总算是解决这个问题了，Mark一下，实习第三周。