node.js 使用 UglifyJS2 高效率壓縮 javascript 文件

 

UglifyJS2 這個工具使用很長時間了,但以前都是在 gulp 自動構建 時用到了 UglifyJS 算法進行壓縮. 最近玩了一下 UglifyJS2 ,作了一個 在線壓縮javascript工具 歡迎點擊玩耍.

爲何要壓縮 javascript

由於每一個人開發者的書寫習慣,定義參數習慣,已經使用習慣都不同. 因此相同的功能出自不一樣開發者代碼各異.這裏牽扯到一個代碼所佔空間.

之前端爲例來講明

你們一般都會認爲,如今在網絡時代,動不動就是10M光纖,撥號上網讓人感受是上個世紀的方式… 說法是沒有問題,可是,咱們今天討論的並非終端下載速度. 而是前端壓縮對服務器有何利好!

---

如今的前端愈來愈重,富客戶端方式讓人有更好的體驗,因此前端各類框架,插件空前盛行

---

咱們普普統統引用一個第三方包或者開源插件,輕則幾十K,重則上M,十幾M 都很常見. 若是一個客戶端鏈接,服務器須要傳輸100K ,那麼若是同時有幾百個,幾千個客戶端併發時,服務器輸出帶寬是多大? 再想一想公司租賃帶寬一年費用多少? (這可不是咱們普通家庭包年寬帶的價格)

若是你能夠把前端 100k 的靜態資源壓縮到 50k ,那麼在相同帶寬的狀況下,是否是能夠提升服務器併發量.這就是直接幫公司省錢了.

還有一個緣由:

頁面加載,咱們一般的優化方案是把 css 放到 head 裏面加載,把 javascript 放到 body 結束處加載. 就是由於 javascript 的運行機制是單線程,若是你把大量的 javascript 腳本放在 head 處加載,無形中影響了 頁面渲染速度. 固然如今 html5 也在優化一些更優的方案. 可是不論這沒有,小文件的加載必定比大文件加載用戶體驗更好.

開始學習下 UglifyJS2

UglifyJS 和 UglifyJS2 是什麼關係 UglifyJS是UglifyJS2的前身， 它是一個Javascript開發的通用的語法分析、代碼壓縮、代碼優化的工具. 基於Nodejs環境開發，支持CommonJS模塊系統的任意的Javascript平臺.

UglifyJS 功能 生成JS代碼的抽象語法樹(AST)，經過parse-js.js完成. 遍歷AST語法樹，作各類操做，好比自動縮進、縮短變量名、刪除塊括號{}、去空格、常量表達式、連續變量聲明、語塊合併、去掉沒法訪問的代碼等，經過process.js完成.

UglifyJS2 是 UglifyJS 的改進版 做者對以前的 UglifyJS 作了不少的優化,包括下面手段:

• parser,用於實現抽象語言法樹(AST)
• the code generator, 經過AST生成JS代碼和source map
• compressor, 用於JS代碼的壓縮
• mangler, 用於減小局部變量的命名，用單字母替換
• scope analyzer, 用來判斷 變量定義範圍和變量引用範圍的工具
• tree walker, AST樹遍歷工具
• tree transformer, AST樹轉換工具

UglifyJS2安裝

npm 全局安裝

npm install uglify-js -g

你也能夠經過 github 來下載源碼使用

git clone git://github.com/mishoo/UglifyJS2.git

UglifyJS2 參數說明

➜ /Users/zhangzhi/code >uglifyjs --help uglifyjs input1.js [input2.js …] [options] Use a single dash to read input from the standard input.

NOTE: by default there is no mangling/compression. Without [options] it will simply parse input files and dump the AST with whitespace and comments discarded. To achieve compression and mangling you need to use -c and -m.

Options: –source-map Specify an output file where to generate source map. –source-map-root The path to the original source to be included in the source map. –source-map-url The path to the source map to be added in //# sourceMappingURL. Defaults to the value passed with --source-map. –source-map-include-sources Pass this flag if you want to include the content of source files in the source map as sourcesContent property. –in-source-map Input source map, useful if you’re compressing JS that was generated from some other original code. –screw-ie8 Pass this flag if you don’t care about full compliance with Internet Explorer 6-8 quirks (by default UglifyJS will try to be IE-proof). –expr Parse a single expression, rather than a program (for parsing JSON) -p, --prefix Skip prefix for original filenames that appear in source maps. For example -p 3 will drop 3 directories from file names and ensure they are relative paths. You can also specify -p relative, which will make UglifyJS figure out itself the relative paths between original sources, the source map and the output file. -o, --output Output file (default STDOUT). -b, --beautify Beautify output/specify output options. -m, --mangle Mangle names/pass mangler options. -r, --reserved Reserved names to exclude from mangling. -c, --compress Enable compressor/pass compressor options. Pass options like -c hoist_vars=false,if_return=false. Use -c with no argument to use the default compression options. -d, --define Global definitions -e, --enclose Embed everything in a big function, with a configurable parameter/argument list. –comments Preserve copyright comments in the output. By default this works like Google Closure, keeping JSDoc-style comments that contain 「@license」 or "@preserve". You can optionally pass one of the following arguments to this flag: - 「all」 to keep all comments - a valid JS regexp (needs to start with a slash) to keep only comments that match. Note that currently not all comments can be kept when compression is on, because of dead code removal or cascading statements into sequences. –preamble Preamble to prepend to the output. You can use this to insert a comment, for example for licensing information. This will not be parsed, but the source map will adjust for its presence. –stats Display operations run time on STDERR. –acorn Use Acorn for parsing. –spidermonkey Assume input files are SpiderMonkey AST format (as JSON). –self Build itself (UglifyJS2) as a library (implies –wrap=UglifyJS --export-all) –wrap Embed everything in a big function, making the 「exports」 and 「global」 variables available. You need to pass an argument to this option to specify the name that your module will take when included in, say, a browser. –export-all Only used when --wrap, this tells UglifyJS to add code to automatically export all globals. –lint Display some scope warnings -v, --verbose Verbose -V, --version Print version number and exit. –noerr Don’t throw an error for unknown options in -c, -b or -m. –bare-returns Allow return outside of functions. Useful when minifying CommonJS modules. –keep-fnames Do not mangle/drop function names. Useful for code relying on Function.prototype.name. –reserved-file File containing reserved names –reserve-domprops Make (most?) DOM properties reserved for –mangle-props –mangle-props Mangle property names –mangle-regex Only mangle property names matching the regex –name-cache File to hold mangled names mappings

> 上面列出了好多的選項,若是使用的時候不明白,能夠對比看下下面的說明

* source-map [string]，生成source map文件。
* –source-map-root [string], 指定生成source map的源文件位置。
* –source-map-url [string], 指定source map的網站訪問地址。
* –source-map-include-sources，設置源文件被包含到source map中。
* –in-source-map，自定義source map，用於其餘工具生成的source map。
* –screw-ie8, 用於生成徹底兼容IE6-8的代碼。
* –expr, 解析一個表達式或JSON。
* -p, –prefix [string], 跳過原始文件名的前綴部分，用於指定源文件、source map和輸出文件的相對路徑。
* -o, –output [string], 輸出到文件。
* -b, –beautify [string], 輸出帶格式化的文件。
* -m, –mangle [string], 輸出變量名替換後的文件。
* -r, –reserved [string], 保留變量名，排除mangle過程。
* -c, –compress [string], 輸出壓縮後的文件。
* -d, –define [string], 全局定義。
* -e, –enclose [string], 把全部代碼合併到一個函數中，並提供一個可配置的參數列表。
* –comments [string], 增長註釋參數，如@license、@preserve。
* –preamble [string], 增長註釋描述。
* –stats, 顯示運行狀態。
* –acorn, 用Acorn作解析。
* –spidermonkey, 解析SpiderMonkey格式的文件，如JSON。
* –self, 把UglifyJS2作爲依賴庫一塊兒打包。
* –wrap, 把全部代碼合併到一個函數中。
* –export-all, 和–wrap一塊兒使用，自動輸出到全局環境。
* –lint, 顯示環境的異常信息。
* -v, –verbose, 打印運行日誌詳細。
* -V, –version, 打印版本號。
* –noerr, 忽略錯誤命令行參數。

# UglifyJS2 使用方法
> UglifyJS2使用包括2種方式
1. shell 指令調用
2. api 調用

>> shell 指令
咱們嘗試用來壓縮2個文件
➜  /Users/zhangzhi/code/test  >
個人 test 目錄下有好多 js 文件,準備挑選2個 js 文件 ( start.js 和 test.js) 進行合併,合併後的文件名爲 min.js

```shell
➜  /Users/zhangzhi/code/test  >uglifyjs start.js test.js -o min.js --source-map min.js.map

而後看下當前目錄: 多出了2個文件 , min.js 和 min.js.map

壓縮後的樣子是這樣的

api 調用方法

var fs = require('fs');
var uglifyjs = require("uglify-js");
var result = uglifyjs.minify("../test.js",{
   mangle:false
});

上面的一個基本核心方法 minify ,下面咱們單獨看下這個方法

minify 方法

這是一個很是智能的方法 ,共 2個參數

• 第一個參數 *

支持 字符串,路徑,路徑數組

1.字符串參數

就是咱們書寫的 javascript 代碼能夠直接當作一個字符串參數參數函數,可是須要有第二個參數告訴函數,這是 javascript 源碼字符串

var result = uglifyjs.minify("var fun=function(){ alert('一介布衣博客');};",{
    mangle:false,
     fromString:true,
});

上面的第一個參數傳入了 javascript 源碼,第二個參數中 formString : true ,就是告訴 minify 函數,前面的參數是 須要壓縮的 javascript 源碼.

1. 字符串路徑

這是函數默認支持的一種方式,能夠單獨的一個參數,直接給定一個 須要壓縮的 javascript 文件路徑, 固然也能夠2個參數.

var result = uglifyjs.minify("../test.js");

上面的函數執行,會吧個人上級目錄中的 test.js 進行壓縮.默認一個參數時,表示文件路徑

1. 數組指定多個路徑

能夠一個參數,可是這個參數是一個數組 [ ‘路徑1’,’路徑2’,’路徑3’] 相似這樣 結果就是把上面路徑的全部 javascript 壓縮後返回到了 result 對象中,稍後咱們單獨說下 result 返回值.

var result = uglifyjs.minify([ "../test.js", "../mian.js"]);

• 第二個參數*

參數說明

• romString屬性 (default false) 指定第一個參數中的 字符串是 javascript 源碼

• mangle屬性 默認爲true；指定爲false時，表示不進行混淆壓縮

• width和max-line-len屬性 按照說明，這裏應該是指壓縮後的文件的長度

• outSourceMap屬性 用來指定函數返回值result.map字符串轉化爲Object後file屬性的值

• sourceRoot屬性 用來指定函數返回值result.map字符串轉化爲Object後sourceRoot屬性的值

• 返回值 result *

返回值 result 是一個對象. code 屬性對應的是壓縮後的腳本

{"code":"這裏是壓縮後的 javascript 腳本","map":null}

出自:一介布衣 http://yijiebuyi.com

node.js 使用 UglifyJS2 高效率壓縮 javascript 文件

你可能感興趣

• pandoc markdown 生成pdf文檔
• forever node.js web應用中不可或缺的偉大模塊
• node.js AES/ECB/PKCS5Padding 與其餘語言的加密解密通用
• ejs母版頁讓你的node.js應用開發更快更有效- 一介布衣
• node.js 實現一個簡單的登陸攔截器