引子：
最近在做一个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文件，写法如下：
@H_502_24@/*******************************************************************/
- /**/
@H_502_24@/*IBMConfidential*/- /**/
@H_502_24@/*OCOSourceMaterials*/- /**/
@H_502_24@/*CopyrightIBMCorp.2010*/- /**/
@H_502_24@/*Thesourcecodeforthisprogramisnotpublishedorotherwise*/- /*divestedofitstradesecrets,irrespectiveofwhathasbeen*/
@H_502_24@/*depositedwiththeU.S.CopyrightOffice.*/- /**/
@H_502_24@/*******************************************************************/- dependencies={
@H_502_24@layers:[- {
@H_502_24@name:"../compressed/tms.js",- resourceName:"tms",
@H_502_24@layerDependencies:[- ],
@H_502_24@dependencies:[- "dojo.cache",
@H_502_24@"dojox.widget.TitleGroup",- "dijit.Calendar",
@H_502_24@"dijit.Dialog",- "dijit.Menu",
@H_502_24@"dijit.MenuBar",- "dijit.MenuItem",
@H_502_24@"dijit.PopupMenuBarItem",- "dijit.TitlePane",
@H_502_24@"dijit.Tooltip",- "dijit.TooltipDialog",
@H_502_24@"dijit._Templated",- "dijit.dijit",
@H_502_24@"dijit.form.Button",- "dijit.form.CheckBox",
@H_502_24@"dijit.form.ComboBox",- "dijit.form.CurrencyTextBox",
@H_502_24@"dijit.form.DateTextBox",- "dijit.form.DropDownButton",
@H_502_24@"dijit.form.Form",- "dijit.form.NumberTextBox",
@H_502_24@"dijit.form.RadioButton",- "dijit.form.RangeBoundTextBox",
@H_502_24@"dijit.form.Select",- "dijit.form.TextBox",
@H_502_24@"dijit.form.Textarea",- "dijit.form.TimeTextBox",
@H_502_24@"dijit.form.ValidationTextBox",- "dijit.form._FormSelectWidget",
@H_502_24@"dijit.layout.BorderContainer",- "dijit.layout.ContentPane",
@H_502_24@"dijit.layout.TabContainer",- "dijit.layout._TabContainerBase",
@H_502_24@"dojo.data.ItemFileReadStore",- "dojo.data.ItemFileWriteStore",
@H_502_24@"dojo.data.ObjectStore",- "dojo.date.locale",
@H_502_24@"dojo.dnd.Source",- "dojo.fx",
@H_502_24@"dojo.parser",- "dojo.store.Memory",
@H_502_24@"dojox.grid.DataGrid",- "dojox.grid.EnhancedGrid",
@H_502_24@"dojox.grid._EditManager",- "dojox.grid._RowManager",
@H_502_24@"dojox.grid._RowSelector",- "dojox.grid.cells._base",
@H_502_24@"dojox.grid.cells.dijit",- "dojox.grid.enhanced._FocusManager",
@H_502_24@"dojox.grid.enhanced.plugins.CellMerge",- "dojox.grid.enhanced.plugins.Cookie",
@H_502_24@"dojox.grid.enhanced.plugins.DnD",- "dojox.grid.enhanced.plugins.Filter",
@H_502_24@"dojox.grid.enhanced.plugins.GridSource",- "dojox.grid.enhanced.plugins.IndirectSelection",
@H_502_24@"dojox.grid.enhanced.plugins.Menu",- "dojox.grid.enhanced.plugins.NestedSorting",
@H_502_24@"dojox.grid.enhanced.plugins.Pagination",- "dojox.grid.enhanced.plugins.Printer",
@H_502_24@"dojox.grid.enhanced.plugins.Search",- "dojox.grid.enhanced.plugins.Selector",
@H_502_24@"dojox.grid.enhanced.plugins.exporter.CSVWriter",- "dojox.json.query",
@H_502_24@"dojox.layout.ContentPane",- "dojox.widget.Standby",
@H_502_24@"com.ibm.tms.Loader",- "tms.screens.TMSBase",
@H_502_24@"tms.screens.TMSScreen",- "tms.screens.TMSTemplated",
@H_502_24@"tms.screens.TMSNewScreen",- "tms.screens.notesHistory.notesHistory",
@H_502_24@"tms.screens.TMSTabContainer",- "tms.common.tms",
@H_502_24@"com.ibm.tms.BorderContainer",- "com.ibm.tms.ButtonSelector",
@H_502_24@"com.ibm.tms.Customizer",- "com.ibm.tms.DropMultiSelect",
@H_502_24@"com.ibm.tms.TMSCheckedMultiSelect",- "com.ibm.tms.TMSComboBox",
@H_502_24@"com.ibm.tms.TMSDropDownButton",- "com.ibm.tms.TMSGrid",
@H_502_24@"com.ibm.tms.TMSGridPagination",- "com.ibm.tms.TMSIconTooltip",
@H_502_24@"com.ibm.tms.TMSMessageBox",- "com.ibm.tms.TMSTooltip",
@H_502_24@"com.ibm.tms.TmsSelect",- "com.ibm.tms.form.CarrierRefTextBox",
@H_502_24@"com.ibm.tms.form.EmailTextBox",- "com.ibm.tms.form.NumberTextBox",
@H_502_24@"com.ibm.tms.form.ValidationTextBox",- "com.ibm.tms.form.ZipCodeTextBox",
@H_502_24@"com.ibm.tms.grid.Selection",- "com.ibm.tms.grid._EditManager",
@H_502_24@"com.ibm.tms.grid._FocusManager",- "com.ibm.tms.grid._RowManager",
@H_502_24@"com.ibm.tms.grid._RowSelector",- "com.ibm.tms.grid.cells._base",
@H_502_24@"com.ibm.tms.grid.enhanced.plugins.Selector",- "tms.screens.utils.ScreenUtils",
@H_502_24@"tms.screens.utils.TMSValidation"- ]
@H_502_24@}- ],
@H_502_24@- prefixes:[
@H_502_24@["dijit","../dijit"],- ["dojox","../dojox"],
@H_502_24@["com.ibm.tms","../com/ibm/tms"],- ["tms.screens","../../../tms/screens"],
@H_502_24@["tms.common","../../../tms/js/common"]- ]
@H_502_24@}- @H_502_24@
好了，准备就绪，开始优化
打包js
我们将打包js作为一个任务集成到ant中：build.xml
@H_502_24@<targetname="compressJS">
- <echomessage="CompressJavascriptcode..."/>
@H_502_24@- <execexecutable="java"dir="./webpages/tms/dojo/util/buildscripts"
@H_502_24@resolveexecutable="true"failonerror="false">- <argline="-classpath../shrinksafe/js.jar;../shrinksafe/shrinksafe.jarorg.mozilla.javascript.tools.shell.Mainbuild.jsaction=clean,releasecssOptimize=commentsprofile=TMSreleaseName=release"/>
@H_502_24@</exec>- </target>
BUILD SUCCESSFUL以后，在dojo下会生成一个release文件夹，将compressed目录下的tms.js文件和nls文件夹拷贝到根目录下，然后在初始页面中引用：
@H_502_24@<scriptsrc="nls/tms_en-us.js"></script>
注意，dojo.js还是得继续引用
打包css
css文件不能在profile中自定义，所以我们直接使用命令行的方式处理，build.xml:
@H_502_24@<targetname="compressCSS">
- <echomessage="CompressCSS..."/>
@H_502_24@<execexecutable="java"dir="${src}/webpages/tms/dojo/util/buildscripts"- resolveexecutable="true"failonerror="false">
@H_502_24@<argline="-classpath../shrinksafe/js.jar${class_separatetoken}../shrinksafe/shrinksafe.jarorg.mozilla.javascript.tools.shell.Mainbuild_css.js"/>- </exec>
- </target>
BUILD SUCCESSFUL以后，/css文件夹下有几个文件会变大（几十k或者一百多k），他们包含了所有你需要的css文件（打包原理就是所有被import的css文件全部被完全拷贝进来），我们只需要在页面中引用这几个css文件：
@H_502_24@<linktype="text/css"href="css/dojoStyle.css"rel="stylesheet"/>
- <linktype="text/css"href="css/tms.css"rel="stylesheet"/>
结束语
至此，打包的工作算是圆满结束。总结一下，我们利用dojo提供的工具来进行js/css文件的压缩，主要用到js.jar和shrinksafe.jar两个文件。打包原理是将所有引用的文件全部去掉注释后整体引用进来，变成一个大的文件，最后在页面中引用这些打包后的文件。
打包以后http请求数量减少了3/4左右。css的http请求只剩下两个，js的请求数有十几个，主要是_base下的js。
总算是解决这个问题了，Mark一下，实习第三周。