Pure.css

最近做的修改還有一個就是把Bootstrap換掉,因為我覺得它實在是太大了,包進很多我沒用到的東西,即使是壓縮過的版本也要上百 KB,其實我只需要一部份的元件,像是圖片、引言、程式碼和 grid layout 等,但是這些部分的 CSS 所佔的比例其實超級少,所以我決定找一個新的 framework 把它換掉,結果我挑的是 Yahoo 已經沒有繼續更新的專案Pure.css

Pure.css 檔案大小比起 Bootstrap 實在小很多,最小化過的版本只有約 17KB,不過 responsive grid layout 的部分是獨立的,該模組的大小約是 9.57KB,和原來使用 Bootstrap 相比,總共大概是只有原來的四分之一(當然 gzip 後沒差這麼多),不過檔案小這麼多一定有所犧牲,Pure.css 提供的元件比起 Bootstrap 來少很多,而且提供的我幾乎都沒用到,最後我只用到 menu 和 grid layout 兩個部分而已,所以又從 Bootstrap 那邊把我要的元件手工複製出來使用,最後整理出來的 CSS 是 36.15KB,gzip 後是 7.3KB,brotli 壓縮過後是 6.34KB,傳輸前的資料量和原來相比大約是三分之一至四分之一,使用 gzip 壓縮傳輸的資料量則是三分之一左右(相較於原本的 18.97KB),整體來說成效不錯,其實 Framework 的部分還是佔了很大的比例,所以下一步就是把整個 CSS Framework 拿掉了,我推估實際上我需要的這些 CSS 大概 3KB 的資料量就夠了。

不過 Pure.css 是個已經沒在維護的專案了,Github 上已經超過一年沒有動靜,再加它其實沒 Bootstrap 那樣簡單用,有很多細節都還是要自己處理,就連它們首頁應該都是加工不少才出來的,所以要用這套 CSS Framework 的人還是要三思啊。

comments powered by Disqus