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