Yahoo! UI Library: YUI Compressor

According to Yahoo!'s Exceptional Performance Team, 40% to 60% of Yahoo!'s users have an empty cache experience and about 20% of all page views are done with an empty cache (see this article by Tenni Theurer on the YUIBlog for more information on browser cache usage). This fact outlines the importance of keeping web pages as lightweight as possible. Improving the engineering design of a page or a web application usually yields the biggest savings and that should always be a primary strategy. With the right design in place, there are many secondary strategies for improving performance such as minification of the code, HTTP compression, using CSS sprites, etc.
In terms of code minification, the most widely used tools to minify JavaScript code are Douglas Crockford's JSMIN, the Dojo compressor and Dean Edwards' Packer. Each of these tools, however, has drawbacks. JSMIN, for example, does not yield optimal savings (due to its simple algorithm, it must leave many line feed characters in the code in order not to introduce any new bugs).
The goal of JavaScript and CSS minification is always to preserve the operational qualities of the code while reducing its overall byte footprint (both in raw terms and after gzipping, as most JavaScript and CSS served from production web servers is gzipped as part of the HTTP protocol). The YUI Compressor is JavaScript minifier designed to be 100% safe and yield a higher compression ratio than most other tools. Tests on the YUI Library have shown savings of over 20% compared to JSMin (becoming 10% after HTTP compression). Starting with version 2.0, the YUI Compressor is also able to compress CSS files by using a port of Isaac Schlueter's regular-expression-based CSS minifier.
具體請看這裏
[url]http://com3.devnet.re3.yahoo.com/yui/compressor/[/url]

YUI Compressor是使用Java編寫的工具
工作原理簡介:
主要是去掉冗餘的空白,主要包括空格,換行符、製表符。
作爲傳統的JS壓縮,我認識是比較好的了。

針對於大項目來說,用傳統的js壓縮工具,壓縮效率不是很另人滿意

現在的瀏覽器都支持壓縮傳輸(通過設置http header的Content-Encoding=gzip),可以通過服務器的配置(如apache)爲你的js提供壓縮傳輸,或是appfuse中使用的GZipFilter使tomcat也提供這種能力(tomcat1.5後自帶了。自己配置一下就可以了)。但是這種這種動態的壓縮會導致服務器CPU佔用率過高

還有種方法就是靜態壓縮(就是將js預先通過gzip.exe壓縮好) ,這是目前我知道的最好的方法,不但提高了壓縮效率,而且不佔用cpu。有興趣的可以一起研究探討下。
===========================華麗的分割線=====================
今天的主要目的是介紹YUI Compressor
1.[url]http://www.julienlecomte.net/yuicompressor/[/url]到這裏去下載YUI Compressor
我下載的是最新的2.4.1
2.進入YUI Compressor/build目錄下找到yuicompressor-2.4.1.jar
它是一個jar文件。你可以直接拿到編譯運行
查看幫助
輸入java -jar yuicompressor-2.4.1.jar -h
如下圖
[img]/upload/attachment/72413/87499818-ee1c-3bc3-ab93-dd62bf9c4fd0.jpg[/img]
$ java -jar yuicompressor-x.y.z.jar
用法: java -jar yuicompressor-x.y.z.jar [options] [input file]

Global Options
-h, --help 顯示幫助信息
--type 指明需要壓縮的文件是js還是css。
--charset 指明需要壓縮的文件編碼類型
--line-break 在指定的列換行
-v,--verbose 顯示信息和警告信息
-o 指定輸出文件 。默認爲標準輸出(屏幕)。

JavaScript Options
--nomunge Minify only, do not obfuscate
--preserve-semi Preserve all semicolons
--disable-optimizations disable all micro optimizations

演示下
最簡單的語法
java -jar yuicompressor-2.4.1.jar md5.js -o out.js
前後兩個演示,你可以看下效果,在附件test12-23.rar裏面

再去這個網站http://compressorrater.thruhere.net/
查看,粘貼一個腳本可以在線壓縮並比較(在線壓縮的是用2.3.5版本。我自己用的是2.4.1.很明顯我的壓縮效率比較強大)
如圖所示

[img]/upload/attachment/72415/b84ff72d-7a61-37ac-beea-706eb480c81d.jpg[/img]
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章