【翻译】Sencha Cmd中脚本压缩方法之比较
概述
这么多年来,Web开发人员都被告知应优化他们生产环境的代码。传统的方法是将应用程序的所有脚步进行压缩以减少应用程序的大小,以便让应用程序加载更快。而Sencha Cmd这么多年以来已经将这个过程自动化了。
然而,许多客户,还不知道可通过调整Sencha Cmd的压缩代码来进行一些额外的处理。尽管Sencha Cmd默认是适应YUI压缩来进行压缩的,但还可以通过配置使用Google Closure或UglifyJS来进行压缩。下面将会介绍这些,并去测试哪一个压缩工具提供了最大的压缩效果。
要注意的是,本文的本意并不是让你使用某个特定的工具,至于选择哪一种,不选择哪一种,是有许多的因素决定的,本文只是尝试提供一些参考意见。
为什么要修改默认设置?
虽然脚本压缩的处理机制相当复杂,但总的来说还是相当简单的:代码会被标记后解析为一个抽象语法树(abstract syntax tree,AST),然后通过脚本程序进行修改并压缩后输出。
虽然这些独立的工具是如何工作的(如使用什么算法等)已经超出了本文的范围,但还是让我们在更高的层级上来快速体验一下YUI压缩、Closure和UglifyJS。
YUI压缩
YUI压缩是一个使用JAVA编写的命令行工具,它既可以处理Javascript,也可以处理CSS压缩,对于大多数项目来说,它是一个理想的工具。YUI压缩虽然很受欢迎,但已经不再更新了。
如前文所述,Sencha Cmd默认是使用YUI压缩来处理应用程序的生成过程的。
Google Closure编译器
Google Closure编译器也是使用JAVA创建的,不过它只能处理javascript压缩(不包含CSS)。Closure可以直接从命令行运行,它还包含其他的一些服务(UI和API),并通过代码注释和编译标志为压缩处理提供了更多的控制权。
UglifyJS
UglifyJS是这些工具中唯一使用javascript编写的工具,因此非常适合应用于Node.js环境中。如Closure一 样,UglifyJS只提供javascript压缩(不包括CSS)。UglifyJS是以命令行工具方式运行的,并允许通过大量的编译标志来精细的控 制压缩过程。
注意:Sencha Cmd是使用JAVA创建的,而UglifyJS的运行需要使用到Rhino,而不是Node.js。
要记住的是,因为每一个工具会产生不同的压缩输出,因而很难预测哪一个是最理想的结果。为了说明这一点,下面将通过一个示例应用程序来测试这些压缩工具如何去处理这些代码。
案例研究:Ext JS 6示例应用程序
最简单的用来说明这一概念的方式就是使用Sencha Cmd来生产一个示例应用程序:
sencha -sdk ~/path/to/ext generate app Foo ./foo
因为Sencha Cmd自身能搭建一个完整的示例应用程序,因而我们不需要做任何事情。在Firefox打开应用程序,在“开发”模式中应用程序的加载数据统计如下:
这里没有太多惊喜,在“开发”模式中的Ext JS 应用程序依赖于Ext.Loader来同步加载每一个Javascript依赖,虽然只花费了0.29秒来等待24个HTTP请求,但可以想象得出一个企业应用程序可能需要花费更多的时间。
在运行”sencha app build”将示例应用程序转为“生产”模式后,网络统计已经有所改变了:
很显然,现在只加载了很小的脚本资源,而整体的加载时间已经降至0.02秒了。这一切都得感谢javascript压缩的魔力。
显然,使用javascript压缩是很重要的,不过,通过调整Sencha Cmd的设置可以获得更好的结果吗?如果要修改Sencha Cmd所使用的压缩工具,可编辑app.json文件:
{ //.../*** override objects for setting build environment specific* settings.*/"production": { "compressor" : { //"type" : "yui" //the default...//"type" : "uglify" //or..."type" : "closure"}}, //...}1234567891011121314151617
现在运行“sencha app build”,将会使用配置的压缩工具。接下来,让我们来看看使用不同压缩工具后的示例应用程序是如何的:
压缩工具 | 文件大小(字节) | 与源文件比较(%) |
---|---|---|
(none) | 5,166,339 | 100.0% |
YUI | 1,109,534 | 21.48% |
Closure | 1,081,242 | 20.93% |
UglifyJS | 1,069,126 | 20.69% |
YUI (gzip) | 343,696 | 6.65% |
Closure (gzip) | 323,615 | 6.26% |
UglifyJS (gzip) | 329,182 | 6.37% |
在以上表格中,可以看到压缩文件的大小,另外一部分是使用gzip压缩后的输出文件(通过gzip终端命令使用默认设置的运行结果)。从结果可以看到,使用UglifyJS可以输出最小的文件,而如果考虑gzip压缩,则Closure更佳。
如果调整gzip的设置,可能会获得更好的结果。
注意事项
由于Closure赢了,我们是否只是有Closure呢?可悲的是,其实并不是那么明确的。
如果采用额外的步骤来衡量所生产应用程序过程的总时间(包括生产CSS主题和其他步骤),就会注意到一些重要的事情。
示例应用程序使用的是Ext JS 5.0.1.1255,是在MacBook Pro(2011年初,OSX 10.10.1, 2GHz Intel i7, 8GB RAM)上使用Sencha Cmd 5.1.0.26进行压缩的。如果在你的机器上可能会有不同的结果。要注意的是,我修改过生成设置,以避免主题为旧的浏览器进行切片.
sencha -ti app build -c
以上命令会为我们提供执行的总时间(-ti 标志),b并会删除之前生成的输出(-c 标志)以保证压缩是一个干净压缩。为每一个压缩工具运行一次生产,就可以看到为什么YUI压缩是默认选择了:
YUI: 0:00:33
Closure: 0:00:54
UglifyJS: 0:15:40
Closure花费了近两倍的时间去压缩生成的输出,而UglifyJS则需要31x这么长的时间!这里要点就是,是否值得为几千字节的问题而花费大量增加的生产时间。
归根结底,一些公司的首要目标只是减少javascript的大小,而并注重哪几千字节。不过,对于高流量应用程序,则会让他们更关注这些微小的细节,因为页面的速度和总体带宽可能会大大影响利润。
最后,你可能会问任何压缩过的javascript代码执行上是否会更快。这几乎是不可能的事,现有的JSPerf测试表明,执行速度几乎是没有任何差别的。
自定义JS压缩
Sencha Cmd目前还不允许去配置YUI压缩的配置,不过YUI本身也没有提供更多的配置。Sencha Cmd目前允许用户配置Closure去如何压缩代码。
再次打开app.json,在文件中科直接通过“compressor”对象来配置Closure的压缩选项:
{ //..."production": { "compressor" : { "type" : "closure", //all other keys are passed as options"ambiguateProperties" : true, "foldConstants" : true}}, //...}123456789101112131415
Sencha Cmd目前还没有实现UglifyJS的自定义配置,不过该功能已包含在路线图中。
小结
压缩javascript是既定的提高Web应用程序性能的最佳做法。Sencha Cmd默认情况下会自动进行处理,不过,使用更先进的设置来对生成的产品进行额外的优化,是值得的。
**作者: Arthur Kay
Arthur Kay is a Senior Software Engineer at Sencha. He studied Music and Computer Science at Loyola University Chicago and has been involved with the Web since the late 1990s.**
【翻译】Sencha Cmd中脚本压缩方法之比较相关推荐
- cmd 新增dns_win10在cmd中修改dns方法教程
电脑中有些操作需要更改dns地址才可以进行,有时候为了获得更加速度的上网体验或者是想体验一些防劫持智能dns的话,就需要去更改dns地址.那么,Win10在cmd中修改dns对于此类问题,今天小编就详 ...
- coord 在cmd中使用的方法
在文件夹中打开cmd 然后输入CoordTrans.exe获取帮助 然后按提示输入选择转换类型输入地址 输出地址
- ExtJs6.5.2新手入门——如何用sencha cmd创建自己的第一个项目
博主自己也是一个刚开始学习ext的小白,学习新知识一定要记录下来,直接复制自己原来写的培训手册里的,希望能帮到刚接触ExtJs的你!--[作者:伊利蛋白钙yL 原文链接:http://www.cnb ...
- Sencha Cmd 优化 Sencha Ext JS/7.5.12
使用 Sencha Cmd 优化 Sencha Ext JS 应用程序 Sencha Themer - 概览 Sencha Cmd 是构建 Ext 应用程序的基石 Sencha Cmd 是构建 Sen ...
- [Ext JS] Sencha Cmd命令参考之一
sencha ant Ant 是Java语言中用来自动化构建项目的工具,Sencha Cmd中内置了Ant, 该命令用于调用Apache Ant相关的任务. 常见用法 sencha ant 查找当前目 ...
- [翻译]ASP.NET MVC4新特性之脚本压缩和合并
2019独角兽企业重金招聘Python工程师标准>>> [翻译]ASP.NET MVC4新特性之脚本压缩和合并 目前主流浏览器限制客户端对同一域名只能同时发起6(PS:原文如此)个H ...
- 【翻译】使用新的Sencha Cmd 4命令app watch
原文:http://www.sencha.com/blog/using-the-new-app-watch-command-in-sencha-cmd-4/ 作者:Don Griffin Don Gr ...
- shell中的函数及脚本调试方法
1.函数格式 目的:将一些相对对立的代码变成函数,提供可读性和重用性,避免重复编写相同代码. 函数格式: 函数关键字:function可以省略,可不带任何参数; 符号{表示函数体的开始(可在函数名后单 ...
- 查看python安装路径-在cmd中查看python的安装路径方法
我相信一定有很多的人跟我一样,经常忘记Python安装的路径,每当用到的时候,最笨的办法就是在全局电脑里,直接查找Python,这样是肯定能查到的,但是如果你的电脑文件超级多,这将是一个工厂量很大的事 ...
最新文章
- JAVA之旅(八)——多态的体现,前提,好处,应用,转型,instanceof,多态中成员变量的特点,多态的案例...
- ubuntu20分区_「图」Canonical希望Ubuntu 20.04 LTS Server Installer更快更舒适
- spring mvc教程_Spring MVC教程
- 第一次马拉松_成为数据科学家是一场马拉松而不是短跑
- djano 字段不重复_Java 14 发布了,不使用quot;classquot;也能定义类了?还顺手要干掉Lombok!...
- 推荐两个漂亮的编程字体
- hive表列字段显示
- 带宽、流量限制软件之Netlimiter Pro中文使用教程
- SQL每日一题(20210901)如果员工的【入职日期】是当月15号后,则该员工的【社保缴纳月份】为【入职日期】的次月
- 探讨OC的内存管理 以及防止循环引用retain cycle 代理为什么用weak block为什么用copy
- java.sql.SQLException: Value ”0000-00-00 00:00:00“ can not be represented as java.sql.Timestamp
- Studio 3T重置日期,达到重复试用的效果
- 雅思作文模板.html,雅思写作模板必看范文
- MySQL更新数据流程
- Windows API 编程起始——创建一个窗口
- OLAP和数据立方体
- 101页下载 机器学习、深度学习绘图模板.ppt
- java中的setting文件
- Android 图片压缩方案
- 用frontpage 2003 定制sps的UI(转载)
热门文章
- 虚拟服务器声卡,如何使用虚拟声卡?虚拟声卡安装教程!
- 大庆中学2021年高考成绩查询,黑龙江大庆最好的5所高中,对比2020年高考成绩,谁的实力更强?...
- php操作MySQL数据库的方法和解析
- JavaScript的作用域和上下文
- Android ScrollView内部组件设置android:layout_height=fill_parent无效的解决办法
- Java学习笔记(基本数据类型和变量命名规则)
- 变量在函数内外的作用域 3
- c# picturebox控件显示本地图片和显示网上的图片
- 诗与远方:无题(三十三)
- Python学习笔记之类(三)