PurgeCSS，清除沒有使用到的 CSS

程式技術

•

2021-05-23 (最後更新於 2022-05-06)

•

CSS JavaScript Laravel Bootstrap

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

此時小弟我有一個念頭。

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

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

讀完上述兩篇文章就可以明白，其實不只是 Tailwind CSS 與 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$/],
};

如果想要新增新的掃描目錄，可以在 content 中加入目錄的路徑，更多的設定可以參考 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 就會是瘦身過後的版本。