背景介紹

======

大家有沒有去看過jquery-1.8.3.min.js文件中的代碼? 如果有看過你會發(fā)現(xiàn)變量名都是a, b , c啥的.且所有的代碼沒有空格一大長串.這時可能你會疑惑, 為何會這樣?

其實這是線上經(jīng)過壓縮后的代碼, 一般開發(fā)團隊都有自己的工作流程, 代碼起碼要分為開發(fā)版和發(fā)布版兩種.發(fā)布版一般都要走壓縮混淆的流程.目的是為了減小文件的大小, 盡量減少網(wǎng)絡開銷.

Node.js相關流程

======

安裝node.js

安裝當前應用 -- uglifyjs

如何安裝node.js就不再介紹了, 百度一下一大把.安裝uglifyjs如下:

npm install uglify-js -g

image.png

uglifyjs壓縮JS文件

======

uglifyjs壓縮有很多的參數(shù), 詳細可以參閱其[github托管項目][1]. 其中一些參數(shù), 如下截圖:

image.png

什么美化壓縮, 空格多長等等....想仔細研究的話, 可以自己去其github托管項目中看看. (因為本人英文有限, 就不翻譯了).

[1]: https://github.com/mishoo/UglifyJS2

演示如何使用uglifyjs壓縮JS

打開一個用于存放JS文件的文件夾,文件目錄如下圖:

image.png

準備壓縮lazyLoad.js做實驗, 當前該文件的大小為10KB.我們來進行壓縮,看看壓縮后的文件大小是多少?

這里給大家介紹一個小技巧, 以方便快速地打開cmd, 并定位到當前目錄.

按住Shift鍵的同時在當前文件下右擊, 在彈出的菜單中選擇"在此處打開命令窗口"即可.

image.png

點擊"在此處打開命令窗口"后即可以進入到cmd, 你會發(fā)現(xiàn)已經(jīng)切換到當前文件所在的路徑了.

此時輸入命令對lazyLoad.js文件進行壓縮并輸出文件名為lazyLoady.min.js的文件:

uglifyjs lazyLoad.js -o lazyLoad.min.js

也可以運行如下代碼, 測試一下-m參數(shù):

uglifyjs lazyLoad.js -m -o lazyLoad.min.js

image.png

查看一下結果, 如下截圖:

image.png

可以看到, 壓縮后只有3KB, 相比之前的, 文件縮小了3倍多.快去試下吧!

結束語

======

對于自己來說, 本文就相當于做筆記. 需要注意的是, uglifyjs只能壓縮js文件(且只支持ECMAScript 5: ES5).

行文匆匆, 文中要是有什么不正確的地方, 歡迎指正!

總結

以上是生活随笔為你收集整理的如何使用js压缩html代码,使用uglifyjs压缩JS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。