[前後端 & VSCode]PHP HTML JS CSS Code排版反格式化(壓縮檔案大小)

網路上看到的幾乎都是教如何格式化Code(讓Code變好看)
但是很少有教如何壓縮代碼
當你的網頁專案寫的太龐大時
就會影響到上、下載以及檔案讀取速度
(對於虛擬主機更是需要)

在VSCode中
有幾個方法/外掛可以協助你壓縮代碼

[Minify][作者:HookyQR]
這個外掛可以用在CSS、JS上
而且還有一鍵壓縮按鈕
如果嫌不夠方便
還可以自訂儲存時自動壓縮

(當檔案存在時才覆寫更新)

"es6-css-minify.minifyOnSave": "exists"

(儲存的路徑)

"es6-css-minify.jsMinPath": "/js"

因為本人只有使用到JS
所以只有JS設定
更多設定可以到這邊去看GitHub


[Live Sass Complier][作者:Ritwick Dey]
如果你有使用SASS
這個外掛除了會幫你編譯成CSS之外
還可以加入壓縮功能

(取消生成CSS地圖)

"liveSassCompile.settings.generateMap": false

(格式化設定,壓縮代碼)

"liveSassCompile.settings.formats": [
    {
        "format": "compressed",
    }
],

更多設定可以到這裡看GitHub


再來就是要手動寫方法實作壓縮代碼

[PHP壓縮輸出的html]

function compress_HtmlCode($codedata)
{
    $searchdata = array(
        '/\>[^\S ]+/s', // remove whitespaces after tags
        '/[^\S ]+\</s', // remove whitespaces before tags
        '/(\s)+/s' // remove multiple whitespace sequences
    );
    $replacedata = array('>', '<', '\\1');
    $codedata = preg_replace($searchdata, $replacedata, $codedata);
    return $codedata;
}

ob_start('compress_htmlCode');

ob_end_flush();

把ob兩個方法分別放到php最上面跟最下面即可

[格式化PHP前置空白]
在Code格式化後會變成樹狀結構
但是反格式化後就會通通變成前面沒空格

使用取代功能-開啟正規表達式(規則運算式)
套入此pattern ^[\s]{0,}
此pattern包括換行符也會取代
要再次格式化時按下Alt+Shift+F即可

推薦一個外掛
ssmacro
這個外掛可以執行指定的指令(如replace)以及參數
此外掛網站
StackOverFlow上有簡單的使用方法