我用的乙個奇怪的組合方式,暫時還沒有把他們聯絡在一起。
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...