2019年6月27日 星期四

從 yui compressor 升級到 clean-css-cli + uglifyjs 的心得

我這裡指的是 cli 版本。
由於 yui compressor 已經很沒有在維護了,再加上原本的 java 版本速度很慢,這次一舉換成 node 版本。
原本的 yui compressor 使用的 cli 為
java -jar /usr/share/yui-compressor/yui-compressor.jar --charset=utf-8 {input-file} -o {output-file}
新的改成
js: uglifyjs -c -m -- {input-file} > {outputfile}
css: cleancss -O1 specialComments:off --skip-rebase --inline none {input-file} > {outputfile}

幾點心得:

CSS 部份

在這個過程中有比較 ycss (yui compressor 的 node 版本),uglifycss (說是從 yui compressor port 來的,但看起來是重寫的)。再比較一下 npm 的下載次數和 github 的星號數。ycss 7 年沒有維護了,不考慮。最後來決定採用 clean-css-cli 。速度上的比較:
  • yui compressor (java):2m10s
  • clean-css-cli: 55s
  • uglifycss: 26s
clean-css 速度不是最快的,但壓的還是比較小。功能也比較多,但我都沒用上。

JS 部份

在這個過程中有比較 closure ,但真的速度太慢了,比起 uglifyjs 差了 4~8 倍,uglifyjs 的官網有寫比較表。從過去的 yui compressor 升級到 uglifyjs3 之後,看到一些很新的壓縮的方法,比如說 false 會變成 !1 , true 會變成 !0,if(a == b) c = d; 會變成 (a == b && c = d)。目前看到的缺點是,在 output 的結尾會多個換行字元。