PurgeCSS教學

PurgeCSS 教學 | 壓縮CSS工具 |壓縮超過80%

  • 七月 31, 2019
  • 文章
  • No comments

介紹

PurgeCSS 是一個壓縮CSS的工具。它可以比對我們的前端文件(html, erb, php, 等等) 跟我們CSS,然後拿掉沒有用到的CSS。 讓我們的CSS檔案最小。

PurgeCSS 也可以搭配其他的打包工具📦(Build Tools),譬如Webpack, Gulp, PostCSS。所以它是很容易導入我們的專案裡面。我也強力建議每個專案都應該導入。尤其你的專案有用到其他CSS框架(Bootstrap, Material, Tailwind), 用PurgeCSS 效果會更好, 因為通常library都還滿肥的。 我們通常只會用到library的幾個classes 而已

線上工具

那我們也介紹一個工具 https://purifycss.online/ , 它背後就是用PurgeCSS。 那很簡單,你只需要把你的網站URL放上去就可以了!

Purify CSS 工具
這裡會跟你說減少多少

Coding 實作

這裡我有做一個Youtube 教學還有我的Git Repo可以參考。

Github 連結🔗: https://github.com/kuanhsuh/purgeCSS-demo-bigboycancode

相關資源

關於作者: Danny Huang

大家好,我是Danny,是位熱愛程式的前端工程師,具有豐富工作與接案經驗。我在這裡會陸續推出一些網頁開發,線上行銷的文章。 如果喜歡這方面的文章可以加入email list。