PurgeCSS教學

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

  • 31 7 月, 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。

鎰誠數位

我們擁有網頁工程師的背景,對於程式品質具有極高的自我要求。在電子商務及數位行銷上更有著豐富的經驗。

聯絡我們

  • 高雄市三民區壽昌路197號12F
  • 0952-823-328
  • bigboycancode@gmail.com
2018 © Copyright 鎰誠 All rights Reserved.