对extjs进行了裁剪和压缩

  最近打算在产品中使用extjs。考虑到这是一个线上环境,对javascript的要求比较高,因而计划对它进行裁剪和压缩,分以下几步进行:

  1. 使用extjs提供的在线裁剪工具(Build your own Ext)对庞大的extjs库进行定制。我定制了三种不同量级的版本,基本可以满足日常各种需要了。
  2. 使用JSA对裁剪后的代码进行语法压缩和文本压缩,其语法压缩具有极高的可靠性,文本压缩的比率也较高。
  3. 激活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特性是非常必要的。

《对extjs进行了裁剪和压缩》有3个想法

  1. 其实语法压缩就是对代码里面的常量变量进行zip压缩了,而gzip则是对所有的数据进行压缩,所以语法压缩后,还有gzip压缩的余地。

    据说有的浏览器不支持js的gzip,那么语法压缩还是很有必要的。

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

您正在使用您的 WordPress.com 账号评论。 登出 /  更改 )

Google photo

您正在使用您的 Google 账号评论。 登出 /  更改 )

Twitter picture

您正在使用您的 Twitter 账号评论。 登出 /  更改 )

Facebook photo

您正在使用您的 Facebook 账号评论。 登出 /  更改 )

Connecting to %s