文章转自: 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特性是非常必要的。
分享到:
相关推荐
"code-compress"项目正是一款用于实现这一目标的开源工具。 该脚本的主要功能是去除代码中的空格、换行符和其他非必要的字符,以达到最小化的效果。这种过程被称为“minification”,它通过删除不必要的字符,不...
压缩只是优化的一部分,还有其他方法如代码分割(code splitting)、延迟加载(lazy loading)、缓存策略等,都可以提升页面加载速度。 7. **现代实践**: 现代Web开发框架如React、Vue和Angular,都有内置的优化...
对于不熟悉命令行的开发者,还可以使用图形界面工具,例如Visual Studio Code的插件或在线工具如JSCompress、Minify等,它们提供了友好的用户界面,使得压缩过程更加直观。 总的来说,JavaScript文件压缩是Web性能...
常见的JavaScript压缩工具有UglifyJS、JSCompress等。 ### JavaScript混淆 JavaScript混淆是将代码中的变量名、函数名、类名等标识符替换为无意义的字符,使得代码难以阅读和理解,从而防止他人轻易地理解代码逻辑...
在IT行业中,优化网站性能是至关重要的,其中一项关键技术就是对JavaScript(Js)、CSS和图片(Images)进行压缩。本文将详细介绍如何利用Node.js实现Js/Css/Images的一键压缩功能,以及配置Node.js运行环境的相关...
一个可以把js源代码压缩成一个ascii字符画的源代码的工具,压缩后的代码仍可运行 (A tool can compress JavaScript code to any ascii image and still run normally )
uglifyjs input.js -o output.js -c dead_code,conditionals,loops ``` 其中: - `dead_code`: 移除死代码。 - `conditionals`: 优化条件语句。 - `loops`: 优化循环结构。 ##### 4.2 预编译选项 预编译选项 `-d...
\n\n```java\n@Override\nprotected void onActivityResult(int requestCode, int resultCode, Intent data) {\n if (requestCode == REQUEST_IMAGE_CAPTURE && resultCode == RESULT_OK) {\n Bundle extras = data....
Javascript 代码压缩 网址 : http://julying.com/lab/compress-js-css/ 类型: 原创脚本 作者: 王子墨 邮箱 : i@julying.com 发布 : 2012-06-10 22:28 更新 : 2012-07-22 12:50 版权所有 2012 | julying....
3. **删除无用代码**:通过dead-code elimination(死代码消除)功能,移除在运行时不会被执行的代码。 4. **优化性能**:通过优化代码结构,如简化表达式、提取常量等,提升代码执行效率。 **二、安装与配置** 要...
例如,使用Google Code上提供的minify项目中的jsmin.php文件。该PHP类库的实现基本上是对Douglas Crockford的JSMin工具的一个移植。 通过PHP脚本引入jsmin.php,然后使用JSMin类的minify方法来合并并压缩多个...
总结起来,UglifyJS是通过Node.js环境运行的JavaScript代码压缩工具,它提供了强大的代码压缩和混淆功能,有助于优化前端项目的性能。通过简单的配置和调用,开发者可以轻松地整合UglifyJS到他们的构建流程中,实现...
function compress(input) { let dict = {}; for (let i = 0; i ; i++) { dict[String.fromCharCode(i)] = i; } let result = []; let current = ""; for (let char of input) { let code = current + char;...
编译 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)-支持...
其中,`uglify-loader-2` 是一个专为 webpack 设计的压缩工具,它基于 `uglify-js`,负责对 JavaScript 代码进行压缩和优化,以减少发布到生产环境的文件大小。在本文中,我们将深入探讨 `uglify-loader-2` 的工作...
在Android应用开发中,图片上传至服务器是一项常见的需求,尤其在社交、电商或者任何...服务端的具体实现则根据所选用的技术栈(如Java的Spring Boot、Python的Django或Node.js的Express)有所不同,但基本原理相同。
protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == REQUEST_IMAGE_CAPTURE && resultCode == RESULT_OK) { Bundle extras = data.getExtras(); Bitmap ...