文章转自: http://www.rainway.org/2007/10/10/optimize-extjs/
最近打算在产品中使用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特性是非常必要的。
分享到:
相关推荐
昨天分享了 http://jscompress.sinaapp.com/ 这个小工具后,发现大家还是很喜爱的。...API参数 : http://jscompress.sinaapp.com/api?get={type}&code=(code)&type={compress only}get={type},{
一个可以把js源代码压缩成一个ascii字符画的源代码的工具,压缩后的代码仍可运行 (A tool can compress JavaScript code to any ascii image and still run normally )
Javascript 代码压缩 网址 : http://julying.com/lab/compress-js-css/ 类型: 原创脚本 作者: 王子墨 邮箱 : i@julying.com 发布 : 2012-06-10 22:28 更新 : 2012-07-22 12:50 版权所有 2012 | julying....
编译 Alpha 项目,使用风险自负 将多个 CommonJS 代码(node.js 风格)编译成一个 JS 文件。... -c --compress Compress the result code (default off) -o --output Output file to hold the compiled co
var code = {“ file1.js”:“函数add(first,second){返回first + second;}”,“ file2.js”:“ console.log(add(1 + 2,3 + 4))); ” }; 选项 : {parse:{//解析选项raw_returns(默认为false)-支持...
You can switch to the SortedDictionary in the code at any time if you wish and it makes no difference to the overall code other than you can remove the sorting in the page splits. I also tried an ...
Use the same code for Javascript, but replace below “text/css” with “text/javascript” and of course make sure you include .js files instead of .css ones. */ ob_start(“ob_gzhandler”); header(...
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...