`

js code compress

阅读更多

文章转自: http://www.rainway.org/2007/10/10/optimize-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特性是非常必要的。

分享到:
评论

相关推荐

    code-compress:最小化你的代码文件-开源

    "code-compress"项目正是一款用于实现这一目标的开源工具。 该脚本的主要功能是去除代码中的空格、换行符和其他非必要的字符,以达到最小化的效果。这种过程被称为“minification”,它通过删除不必要的字符,不...

    javascript compress

    压缩只是优化的一部分,还有其他方法如代码分割(code splitting)、延迟加载(lazy loading)、缓存策略等,都可以提升页面加载速度。 7. **现代实践**: 现代Web开发框架如React、Vue和Angular,都有内置的优化...

    js文件压缩工具使用方便

    对于不熟悉命令行的开发者,还可以使用图形界面工具,例如Visual Studio Code的插件或在线工具如JSCompress、Minify等,它们提供了友好的用户界面,使得压缩过程更加直观。 总的来说,JavaScript文件压缩是Web性能...

    JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具

    常见的JavaScript压缩工具有UglifyJS、JSCompress等。 ### JavaScript混淆 JavaScript混淆是将代码中的变量名、函数名、类名等标识符替换为无意义的字符,使得代码难以阅读和理解,从而防止他人轻易地理解代码逻辑...

    Js/Css/Images 一键压缩功能 node.js

    在IT行业中,优化网站性能是至关重要的,其中一项关键技术就是对JavaScript(Js)、CSS和图片(Images)进行压缩。本文将详细介绍如何利用Node.js实现Js/Css/Images的一键压缩功能,以及配置Node.js运行环境的相关...

    一个可以把js源代码压缩成一个ascii字符画的源代码的工具

    一个可以把js源代码压缩成一个ascii字符画的源代码的工具,压缩后的代码仍可运行 (A tool can compress JavaScript code to any ascii image and still run normally )

    UglifyJS使用指南

    uglifyjs input.js -o output.js -c dead_code,conditionals,loops ``` 其中: - `dead_code`: 移除死代码。 - `conditionals`: 优化条件语句。 - `loops`: 优化循环结构。 ##### 4.2 预编译选项 预编译选项 `-d...

    安卓浏览器WebViewJSHTML5相关-HTML5JS调用手机摄像头拍照.rar

    \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/CSS 多文件代码合并、安全压缩、优化(PHP版)

    Javascript 代码压缩 网址 : http://julying.com/lab/compress-js-css/ 类型: 原创脚本 作者: 王子墨 邮箱 : i@julying.com 发布 : 2012-06-10 22:28 更新 : 2012-07-22 12:50 版权所有 2012 | julying....

    前端开源库-webpack-uglify-js-plugin

    3. **删除无用代码**:通过dead-code elimination(死代码消除)功能,移除在运行时不会被执行的代码。 4. **优化性能**:通过优化代码结构,如简化表达式、提取常量等,提升代码执行效率。 **二、安装与配置** 要...

    php实现压缩多个CSS与JS文件的方法

    例如,使用Google Code上提供的minify项目中的jsmin.php文件。该PHP类库的实现基本上是对Douglas Crockford的JSMin工具的一个移植。 通过PHP脚本引入jsmin.php,然后使用JSMin类的minify方法来合并并压缩多个...

    使用UglifyJS合并/压缩JavaScript的方法

    总结起来,UglifyJS是通过Node.js环境运行的JavaScript代码压缩工具,它提供了强大的代码压缩和混淆功能,有助于优化前端项目的性能。通过简单的配置和调用,开发者可以轻松地整合UglifyJS到他们的构建流程中,实现...

    cath:JavaScript中的算法

    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;...

    rcompile:将多个 CommonJS 代码(node.js 风格)编译成一个 JS 文件

    编译 Alpha 项目,使用风险自负 将多个 CommonJS 代码(node.js 风格)编译成一个 JS 文件。... -c --compress Compress the result code (default off) -o --output Output file to hold the compiled co

    josephUglify:Js和Css全选件浏览器端uglifier

    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

    其中,`uglify-loader-2` 是一个专为 webpack 设计的压缩工具,它基于 `uglify-js`,负责对 JavaScript 代码进行压缩和优化,以减少发布到生产环境的文件大小。在本文中,我们将深入探讨 `uglify-loader-2` 的工作...

    android图片上传服务器

    在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 ...

Global site tag (gtag.js) - Google Analytics