对extjs进行了裁剪和压缩
Contents
最近打算在产品中使用extjs。考虑到这是一个线上环境,对javascript的要求比较高,因而计划对它进行裁剪和压缩,分以下几步进行:
- 使用extjs提供的在线裁剪工具(Build your own Ext)对庞大的extjs库进行定制。我定制了三种不同量级的版本,基本可以满足日常各种需要了。
- 使用JSA对裁剪后的代码进行语法压缩和文本压缩,其语法压缩具有极高的可靠性,文本压缩的比率也较高。
- 激活apache 2的mod_deflate模块,并启用对javascript的压缩。
经过以上三步优化后,extjs的尺寸被缩减到了一个可以接受的数值了。具体效果参见下表:
支持的模块
原始版本尺寸
被JSA处理后版本尺寸
原始版本经deflate压缩后尺寸
JSA版本经deflate压缩后尺寸
jQuery Ext Core Core-Utilities Data Views
140369
77957 (55.5%)
41233 (29.4%)
36225 (25.8%)
在前一个基础上增加: Core-Layers Dialog Form QuickTips-Tooltip Widget Loading Mask Widget
303172
164433 (54.2%)
85097 (28.1%)
73920 (24.4%)
在前一个基础上增加: Core-Drag and Drop DateMenu ColorMenu Resizable Button Widget Tabs Widget SplitBar Widget Menu Widget Border Layout Widget Toolbar Widget Grid Tree Form-HtmlEditor
499490
261616 (52.4%)
133973 (26.8%)
114157 (22.9%)
可以看出:JSA的压缩比率接近一半;不过,无论代码是否被JSA压缩过,经mod_deflate模块处理后的大小都是比较接近的,也就是说,在服务器端开启gzip/deflate特性是非常必要的。
Author
LastMod 2007-10-10