ExtJS 性能优化:利用 Ant 脚本为 JS 代码减负
使用过 ExtJS 的开发者大多有相同感受——页面加载时明显感到卡顿。尤其当数据量增大、JS 文件堆积如山,浏览器很容易陷入“假死”状态,等待时间令人煎熬。在这种情况下,性能优化势在必行。今天分享一种偏向实战的解决方案:在 Ant 打包脚本中,一次性剔除 JS 文件里的空白字符和注释,并尝试合并(合并功能尚未完全实现,仍在研究,暂不展开)。
核心思路非常简单:上线前,将冗余代码压缩到极致。
准备环节:两个 jar 依赖包
要想高效完成这项任务,首先得准备好工具。你需要下载两个 jar 文件:
- YUIAnt.jar
- yuicompressor-2.4.x.jar(版本号根据下载情况确定,我使用的是 2.4.2)
将这两个文件放入项目目录下的指定路径(例如 metadata/tools/yui/),后续在 Ant 脚本中直接引用。
关键配置:build.xml 设置
以下是一份完整的 build.xml 示例,定义了压缩 JS 和 CSS 的任务。核心流程是:先清空 release 目录,再复制源文件,然后对 JS 和 CSS 文件(包括 Ext 自带的)逐一执行压缩。
压缩任务分为四个部分:Ext 的 ux JS、应用自身的 JS、Ext 的 CSS、应用自身的 CSS。每个任务都指定了编码(utf-8)、换行长度、是否保留分号等参数。注意,这里使用同一个 class(YUICompressTask)处理不同目录,仅通过 taskdef 名称加以区分。
避坑指南:YUIAnt.jar 对 UTF-8 编码的支持
这里需要特别提醒一个常见问题:YUIAnt.jar 默认不原生支持 utf-8 编码。如果你在任务中直接设置 encoding="utf-8",很可能遇到编码错误或压缩后文件乱码。我花了些时间才找到解决办法——确保输入和输出都采用 utf-8 编码,并且 jar 版本匹配(例如 yuicompressor-2.4.2 搭配对应的 YUIAnt),基本可以绕过这个坑。但如果使用旧版 YUIAnt,可能需要改用其他方式传递字符集参数。
encoding="utf-8"
实际效果:提升有限,但方向正确
折腾一番终于跑通流程,本以为页面加载速度能大幅提升,结果……只能说比原来好了一点,但仅仅是一点。与 jQuery 那种秒开的体验相比,差距仍然明显。分析下来,瓶颈主要在于 ExtJS 框架本身臃肿以及模块加载过多。即便启用了 Gzip 压缩,也只能缓解传输层面的压力。
对比浏览器表现:
- Firefox 下运行相对流畅,明显比 IE 快一个档次。
- IE 下依旧卡顿,尤其是首次加载,拖拽组件时响应迟缓。
因此,单纯的 JS/CSS 压缩只是优化链条中的一环。要想彻底解决问题,还需要从模块按需加载、延迟初始化甚至更换轻量级框架入手。当然,对于现有项目,先把压缩这一步做了总归是正确选择。

