[重構倒數第09天] - Vue-Cli + PurgeCSS 刪除你用不到的CSS - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 22

Modern Web

[ 重構倒數30天，你的網站不Vue白不Vue ] 系列第 22 篇

[重構倒數第09天] - Vue-Cli + PurgeCSS 刪除你用不到的CSS

13th鐵人賽 vue.js

Mike

2021-09-22 00:05:08

2456 瀏覽

分享至

前言

該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章，在這邊整理了許多我自己使用Vue重構很多網站的經驗分享給讀者們。

我們在做專案的時候，不管是用框架開發，又或是一般的方式開發，都會需要寫大量的CSS樣式，但是往往在開發需求的時候，都會東改改西改改，甚至是之前寫的CSS後來有改了其他的東西，結果忘記刪掉舊的，甚至我們在引入其他人寫的CSS組件的時候也會有很多用不到的CSS存在，這些CSS都會在我們進行專案 build的時候，都改它打包進去，所以就會增加無謂的容量，拖累網站載入的速度，所以我們除了要再上線的時候去壓縮CSS以外，我們還要再 build 的時候去把沒有用到的CSS給刪除乾淨，那應該要怎麼做呢?

PurgeCSS 這不就來了嗎

PurgeCSS 就是一個用來刪除你用不到的 CSS 的工具。它除了一般我們寫的CSS以外，也很常應用在許多CSS框架上面，像是 TailwindCSS、Bootstrap、MaterializeCSS等，因為我們可能只會使用到一小部分的CSS，但是還有其他大量且我們用不到的CSS放在那邊，所以我們才需要透過 PurgeCSS 來幫助我們把用不到的CSS給刪除，瘦身我們最後 build 出去的 CSS。

PurgeCSS 官網 : https://purgecss.com/

馬上在我們的 Vue-cli 專案上面來加入PurgeCSS

首先我們先開啟終端機的視窗，路徑移動到專案的資料夾裡面

cd my-app

然後執行 vue add @fullhuman/purgecss 把整個 purgecss 的東西給掛載進來專案。

vue add @fullhuman/purgecss

這時候你會發現你多了一個 postcss.config.js

const IN_PRODUCTION = process.env.NODE_ENV === "production";

module.exports = {
  plugins: [
    IN_PRODUCTION &&
      require("@fullhuman/postcss-purgecss")({
        content: [`./public/**/*.html`, `./src/**/*.vue`],
        defaultExtractor(content) {
          const contentWithoutStyleBlocks = content.replace(
            /<style[^]+?<\/style>/gi,
            ""
          );
          return (
            contentWithoutStyleBlocks.match(
              /[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g
            ) || []
          );
        },
        safelist: [
          /-(leave|enter|appear)(|-(to|from|active))$/,
          /^(?!(|.*?:)cursor-move).+-move$/,
          /^router-link(|-exact)-active$/,
          /data-v-.*/,
        ],
      }),
  ],
};

這裡面都是跟 PurgeCSS 有關的設定，細節我們等等再回來說，這樣你專案的 PurgeCSS 就算設定完成了，接下來你就可以放心開發，然後 build 的時候 PurgeCSS 就會幫你刪除沒用到的 CSS。

But...

我們先來 build 一下檔案

npm run build

你就會看到發生以下的錯誤 ( 如果沒有這個錯誤就先不用管這段XD )

Vue mike

這問題是因為 postcss版本的問題造成的，所以我們只要降版本就可以正常運行了。

npm i -D @fullhuman/postcss-purgecss@3.0.0 postcss@7.0.35

我們再一次執行 npm 的安裝，安裝完成後再執行一個 build 就可以囉。

Vue mike

當我們已經可以正常 build 的時候就可以開始進入到細節設定的部分。

PurgeCSS 的設定介紹

這是我們現在的 postcss.config.js

const IN_PRODUCTION = process.env.NODE_ENV === "production";

module.exports = {
  plugins: [
    IN_PRODUCTION &&
      require("@fullhuman/postcss-purgecss")({
        content: [`./public/**/*.html`, `./src/**/*.vue`],
        keyframes: true,
        variables: true,
        defaultExtractor(content) {
          const contentWithoutStyleBlocks = content.replace(
            /<style[^]+?<\/style>/gi,
            ""
          );
          return (
            contentWithoutStyleBlocks.match(
              /[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g
            ) || []
          );
        },
        safelist: [
          /-(leave|enter|appear)(|-(to|from|active))$/,
          /^(?!(|.*?:)cursor-move).+-move$/,
          /^router-link(|-exact)-active$/,
          /data-v-.*/,
        ],
      }),
  ],
};

IN_PRODUCTION這個變數是用來判斷現在環境是不是 production 的環境，因為我們再使用 PurgeCSS 清除用不到的 CSS 的時候，會去掃描專案所有的 .vue檔案，但是當專案變大的時候這個掃描會越來越久，所以如果你再開發階段的時候還持續使用 PurgeCSS ，那當每次存檔的時候就會越來越慢，所以我們只會再專案要上線的時候執行 npm run build就好。

接下來我們來看一下 @fullhuman/postcss-purgecss 裡面幾個比較需要知道的設定選項

content : PurgeCSS 會去掃描的檔案，在這裡面設定的路徑以及副檔名的檔案都會被去 PurgeCSS 給掃描，所以今天如果你要去掃描其他的檔案的話，只要在這裡面增加路徑跟副檔名即可。
defaultExtractor: 可以另外自定義掃描的規則，像是上面的例子，會去偵測style標籤有沒有用上其它的功能或是規則，然後再進一步的去處理 class。
safelist : 你可以去指定哪一些 class 不會被 PurgeCSS 刪除，即便它沒有被用到，因為 PurgeCSS 掃描的是我們在 html 上面所用到的 class，所以如果是透過 javascript 另外加上去的，或是像是 vue 的 transition 的 class 那樣的話，如果沒有家加入 safelist裡面，它就會在 build 的時候被刪除。
keyframes (default: false) : 如果有像是 @keyframes的 css 或是像我們用了一些動畫的 css 套件，例如 animate.css等，只要設定成 true，就可以刪除用不到的 @keyframes。
variables (default: false) : 跟 keyframes 很像，是用來刪除沒有用到的 css 變數，還有我們在使用大型的 CSS 框架像是 Bootstrap 的時候，就會很需要把這個參數加上去，改成 true來進行優化。