- 背景介紹
======
大家有沒有去看過jquery-1.8.3.min.js文件中的代碼? 如果有看過你會發(fā)現變量名都是a, b , c啥的.且所有的代碼沒有空格一大長串.這時可能你會疑惑, 為何會這樣?
其實這是線上經過壓縮后的代碼, 一般開發(fā)團隊都有自己的工作流程, 代碼起碼要分為開發(fā)版和發(fā)布版兩種.發(fā)布版一般都要走壓縮混淆的流程.目的是為了減小文件的大小, 盡量減少網絡開銷.
- Node.js相關流程
======
- 安裝node.js
- 安裝當前應用 -- uglifyjs
如何安裝node.js就不再介紹了, 百度一下一大把.安裝uglifyjs如下:
npm install uglify-js -g
image.png
- uglifyjs壓縮JS文件
======
uglifyjs壓縮有很多的參數, 詳細可以參閱其[github托管項目][1]. 其中一些參數, 如下截圖:
image.png
什么美化壓縮, 空格多長等等....想仔細研究的話, 可以自己去其github托管項目中看看. (因為本人英文有限, 就不翻譯了).
[1]: https://github.com/mishoo/UglifyJS2
演示如何使用uglifyjs壓縮JS
打開一個用于存放JS文件的文件夾,文件目錄如下圖:
image.png
準備壓縮lazyLoad.js做實驗, 當前該文件的大小為10KB.我們來進行壓縮,看看壓縮后的文件大小是多少?
這里給大家介紹一個小技巧, 以方便快速地打開cmd, 并定位到當前目錄.
按住Shift鍵的同時在當前文件下右擊, 在彈出的菜單中選擇"在此處打開命令窗口"即可.
image.png
點擊"在此處打開命令窗口"后即可以進入到cmd, 你會發(fā)現已經切換到當前文件所在的路徑了.
此時輸入命令對lazyLoad.js文件進行壓縮并輸出文件名為lazyLoady.min.js的文件:
uglifyjs lazyLoad.js -o lazyLoad.min.js
也可以運行如下代碼, 測試一下-m參數:
uglifyjs lazyLoad.js -m -o lazyLoad.min.js
image.png
查看一下結果, 如下截圖:
image.png
可以看到, 壓縮后只有3KB, 相比之前的, 文件縮小了3倍多.快去試下吧!
- 結束語
======
對于自己來說, 本文就相當于做筆記. 需要注意的是, uglifyjs只能壓縮js文件(且只支持ECMAScript 5: ES5).
行文匆匆, 文中要是有什么不正確的地方, 歡迎指正!
