PurgeCSS,清除沒有使用到的 CSS

最近開始在學習 TailwinsCSS
TailwindCSS 有一個很讚的功能,就是使用 PurgeCSS 去清除沒有使用到 CSS class name
將 CSS 檔案進行大幅度的瘦身

此時小弟我有一個念頭

「PurgeCSS 可不可以幫 Bootstrap 的 CSS 檔案進行瘦身?」

搜尋一下官方文件,還真的有相關說明
官方提到,雖然還沒有正式支援(歡迎各位提出 PR),不過想用 PurgeCSS 幫檔案進行瘦身是可行的
並提供了兩篇相關文章教你如何使用 PurgeCSS

讀完上述兩篇文章就可以明白,其實不只是 TailwindCSS 與 Bootstrap
只要有需要,你可以幫任何 CSS 檔案進行瘦身,那要怎麼做呢?下方來個簡單教學

 

使用 PurgeCSS 進行瘦身


首先安裝 PurgeCSS

npm install --save-dev purgecss

安裝好之後就可以使用 PurgeCSS 的指令

./node_modules/.bin/purgecss

查看一下 PurgeCSS 使用說明

Options:
  -con, --content <files...>  glob of content files
  -css, --css <files...>      glob of css files
  -c, --config <path>         path to the configuration file
  -o, --output <path>         file path directory to write purged css files to
  -font, --font-face          option to remove unused font-faces
  -keyframes, --keyframes     option to remove unused keyframes
  -rejected, --rejected       option to output rejected selectors
  -s, --safelist <list...>    list of classes that should not be removed
  -b, --blocklist <list...>   list of selectors that should be removed
  -h, --help                  display help for command

接下來我們就用指令減少 Bootstrap 的 CSS 檔案大小
假設 Bootstrap 的 CSS 檔案名稱為 public/css/app.css
我們在同一個目錄底下產生一個瘦身版的 purge-app.css

./node_modules/.bin/purgecss --css  public/css/app.css --content resources/views/**/*.blade.php vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php storage/framework/views/*.php --output public/css/purge-app.css

說明各個參數的意義

  • --css:指定要瘦身的目標 CSS 檔案路徑
  • --content:要掃描的視圖(View)目錄,視圖中沒有使用的 class name 就會從目標 CSS 檔案中刪除。這裡一共指定三個路徑
    • resources/views/**/*.blade.php
    • vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php
    • storage/framework/views/*.php
  • --output:指定瘦身後的檔案要儲存在哪個路徑

瘦身成功後,可以來查看一下檔案大小的差距

-rw-r--r-- 1 hello hello 182K May 22 16:58 app.css
-rw-r--r-- 1 hello hello  31K May 22 16:59 purge-app.css

從 182K 變成只有 31K,是不是很讚呢?
這時候可以重新讀取一下網站,查看讀取的 CSS 有沒有問題

 

使用 Laravel Mix 的擴充套件進行瘦身


每次都輸入指令瘦身可能有點麻煩,我們可以將 PurgeCSS 整合進 Laravel Mix
在 Laravel 中,可以使用由 Spatie 團隊提供的套件來幫 CSS 檔案進行瘦身

首先安裝此套件

npm install --save-dev laravel-mix-purgecss

接下來只要在 webpack.mix.js 中設定

const mix = require('laravel-mix');
// 引入套件
require('laravel-mix-purgecss');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .purgeCss(); // 使用 PurgeCSS 幫檔案進行瘦身

laravel-mix-purgecss 有一個相依套件 postcss-purgecss-laravel
裏面有定義預設要掃描的目錄

const defaultConfig = {
    // 預設要掃描的目錄
    content: [
        "app/**/*.php",
        "resources/**/*.html",
        "resources/**/*.js",
        "resources/**/*.jsx",
        "resources/**/*.ts",
        "resources/**/*.tsx",
        "resources/**/*.php",
        "resources/**/*.vue",
        "resources/**/*.twig",
    ],
    defaultExtractor: (content) => content.match(/[\w-/.:]+(?<!:)/g) || [],
    safelist: [/-active$/, /-enter$/, /-leave-to$/, /show$/],
};

如果想要新增新的掃描目錄,可以加入參數
更多的設定可以參考 PurgeCSS 的官方文件

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .purgeCss({
        extend: {
            content: [
                'vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
                'storage/framework/views/*.php',
                'public/js/*.js',
            ],
        },
    })

執行 Laravel Mix,重新打包

npm run production

產出的 app.css 就會是瘦身過後的版本

sharkHead 後端工程師,稍微擅長 Laravel、Python 與 Google
對於前端有興趣,無奈沒什麼慧根