使用uglifyjs壓縮美化JS

2021-09-11 11:33:44 字數 3069 閱讀 6678

我用的乙個奇怪的組合方式,暫時還沒有把他們聯絡在一起。

server 開發**

babel 編譯es6語法,

uglifyjs 來壓縮編譯後的**

"server"

:"webpack-dev-server --open"

,"babel"

:"babel src/mapinit.js -w -o src/mapinit-es5.js "

,"uglify"

:"uglifyjs src/mapinit-es5.js -c -m -o src/mapinit.min.js"

,"svgxy"

:"uglifyjs src/map3dsvg2xy.js -c -m -o src/map3dsvg2xy.min.js"

server 是熱更新

babel 中 -w 也是熱更新

babel 需要配置檔案 .babelrc檔案:

uglifyjs 中沒有熱更新 不能自動編譯

繼續學習研究

ascii_only(預設false) - 轉義字串和regexps中的unicode字元(影響非ascii字元變為無效的指令)

beautify(預設true) - 是否真正美化輸出。傳遞-b將此設定為true,但-b即使您想生成縮小**,也可能需要傳遞,以便指定其他引數,以便您可以使用-b beautify=false它來覆蓋它。

braces(預設false) -總是在插入大括號if,for, do,while或with語句,即使他們的身體是乙個單獨的語句。

comments(預設false) - 傳遞true或"all"保留所有注釋,"some"保留一些注釋,正規表示式字串(例如/^!/)或函式。

indent_level(預設4)

indent_start(預設0) - 用許多空格為所有行新增字首

inline_script(預設true) - 轉義html注釋和字串**現的斜槓

keep_quoted_props(預設false) - 啟用時,防止從物件文字中的屬性名稱中刪除引號。

max_line_len(預設false) - 最大行長度(對於uglified**)

preamble(預設null) - 傳遞時它必須是乙個字串,它將按字面意思新增到輸出中。源地圖將根據此文字進行調整。例如,可用於插入包含許可資訊的注釋。

preserve_line(預設false) - 傳遞true以盡力保留行號。

quote_keys(預設false) - 傳遞true引用文字物件中的所有鍵

quote_style(預設0) - 字串的首選引用樣式(也影響引用的屬性名稱和指令):

0 - 更喜歡雙引號,當字串本身有更多雙引號時,切換到單引號。0最適合gzip大小。

1 - 始終使用單引號

2 - 始終使用雙引號

3 - 始終使用原始**

semicolons(預設true) - 用分號分隔語句。如果你傳遞的false話我們將盡可能使用換行符而不是分號,從而導致更加可讀的uglified**輸出(gzip之前的大小可能會更小; gzip之後的大小不會太大)。

shebang(預設true) - #!在序言中保留shebang (bash指令碼)

webkit(預設false) - 為webkit錯誤啟用變通辦法。phantomjs使用者應該將此選項設定為true。

width(預設80) - 僅在啟用美化時生效,這指定美化者將嘗試遵循的(定向)線寬。它指的是行文字的寬度(不包括縮排)。它目前效果不佳,但它確實使uglifyjs生成的**更具可讀性。

想只美化**,刪除一下注釋等多餘的空格,該怎麼操作呢。開啟美化即可 -b 。

-b 後面有一些配置選項,是「」包裹起來,多個選項用分號隔開,在命令列裡面就需要加個轉義字元了。

"uglify": "uglifyjs src/mapinit-es5.js -o src/mapinit.min.js -m -b ",

"uglify": "uglifyjs src/mapinit-es5.js -o src/mapinit.min.js -m -b \" comments=false,beautify=true\" ",

上面兩行的效果一樣,因為comments預設就是false就是不保留注釋,beautify預設就是true就是開啟美化。

-m 是混淆** -c是壓縮** -b是美化**,我這次主要就是搞懂這三個命令。下面對比一下三個命令的差別

要壓縮的**

/*示例***/		

function echo(stringa,stringb)

/*示例***/

不同命令壓縮後的**

// -c

function echo(stringa,stringb)

// -m

function echo(l,o)

// -c -m

function echo(l,o)

// -c -m -b

function echo(l, o)

-c 開啟了壓縮,刪除了注釋,刪除了未使用的變數hello,**變成了一行,

-m 混淆了變數名稱 stringa,stringb 變成了l, o。增加了閱讀難度。

-c -m 同時使用,效果是上面兩者的結合

-c -m - b 美化一下就是給**換行,方便閱讀。

壓縮前後**大小對比

美化和不美化差了一倍多,壓縮的效果非常明顯。

所以如果只是刪除注釋,直接-b 就可以了。

參考**:

使用uglifyjs壓縮JS

npm install uglify js g 3 演示如何使用uglifyjs壓縮js 開啟乙個用於存放js檔案的資料夾,進入到cmd 此時輸入命令對lazyload.js檔案進行壓縮並輸出檔名為lazyloady.min.js的檔案 uglifyjs lazyload.js o lazyload...

使用UglifyJS合併 壓縮JavaScript

在uglifyjs入門中主要記錄了uglifyjs的安裝,配置。篇末在命令列中使用了乙個簡單命令來壓縮乙個js檔案。這篇以程式設計的方式去壓縮js檔案。即寫乙個build.js檔案,使用node命令執行該檔案。build.js中的 會去呼叫uglifyjs的介面函式以執行壓縮任務。這段 的大概意思是...

使用Knife4j美化Swagger

使用knife4j美化swagger org.springframework.bootgroupid spring boot starter webartifactid dependency io.springfoxgroupid springfox swagger uiartifactid 2.7...