隨著前端項(xiàng)目的不斷迭代，就可能出現(xiàn)部分 CSS 代碼未使用的情況。這些未使用代碼就可能影響應(yīng)用性能。

那么，如何有效地刪除未使用的 CSS 代碼呢？本文將介紹一種強(qiáng)大的工具——PurgeCSS，它可以自動(dòng)檢測(cè)和刪除未使用的 CSS 代碼。無(wú)論是在 Vue、React 還是其他前端框架中，PurgeCSS 都能輕松集成。

接下來(lái)，讓我們一起探索如何配置和使用 PurgeCSS，以及一些高級(jí)配置選項(xiàng)，幫助我們根據(jù)項(xiàng)目需求定制刪除未使用的 CSS 代碼的過(guò)程！

(資料圖)

未使用的 CSS

使用 Chrome 瀏覽器的 Coverage 面板，就可以看到當(dāng)前頁(yè)面所有CSS 文件的使用情況（打開(kāi)Coverage面板方式：Ctrl+Shift+P，搜索 Coverage）：

這里顯示了每個(gè)文件的總大小、未使用的CSS 的大小、未使用的 CSS 所占比例?？梢钥吹?，文件中未使用的 CSS 占大多數(shù)。

點(diǎn)開(kāi)一個(gè)文件，就可以看到這個(gè)文件中有哪些樣式使用了（藍(lán)色），有哪些樣式未使用（紅色）：

默認(rèn)情況下，瀏覽器必須下載、解析和處理它遇到的所有外部樣式表，然后才能將內(nèi)容渲染到用戶屏幕。每個(gè)外部樣式表都必須從網(wǎng)絡(luò)下載。這些額外的網(wǎng)絡(luò)任務(wù)會(huì)顯著增加用戶在屏幕上看到任何內(nèi)容之前必須等待的時(shí)間。

未使用的 CSS 還會(huì)減慢瀏覽器構(gòu)建渲染樹的速度。渲染樹類似于 DOM 樹，不同之處在于它還包含每個(gè)節(jié)點(diǎn)的樣式。要構(gòu)建渲染樹，瀏覽器必須遍歷整個(gè) DOM 樹，并檢查哪些 CSS 規(guī)則適用于每個(gè)節(jié)點(diǎn)。未使用的 CSS 越多，瀏覽器可能需要花費(fèi)更多的時(shí)間來(lái)計(jì)算每個(gè)節(jié)點(diǎn)的樣式。

PurgeCSS 是什么？

PurgeCSS 是一個(gè)用于刪除未使用的 CSS 的工具。它對(duì)于優(yōu)化應(yīng)用通常很有用。當(dāng)使用 Bulma、Bootstrap 或 Tailwind 等 CSS 框架時(shí)，就會(huì)有很多未使用的 CSS。這就是 PurgeCSS 的用武之地。它會(huì)分析內(nèi)容和 CSS 文件，以確定哪些樣式未使用，并將其刪除。PurgeCSS 可以與最常見(jiàn)的 JavaScript 庫(kù)/框架配合使用，例如 Vue.js、React、Gatsby 等。

雖然 PurgeCSS 并不是刪除未使用的 CSS 的唯一工具，但它因其模塊化、易用性和廣泛的自定義選項(xiàng)而脫穎而出。模塊化使開(kāi)發(fā)人員能夠?yàn)樘囟ㄓ美涂蚣軇?chuàng)建模塊提取器。提取器是讀取文件內(nèi)容并提取所使用的 CSS 選擇器列表的函數(shù)。

PurgeCSS 提供了一個(gè)非?？煽康哪J(rèn)提取器，可以處理多種文件類型。但是，默認(rèn)情況下，PurgeCSS 會(huì)忽略包含@、:和/等特殊字符的未使用 CSS 代碼。因此，PurgeCSS 可能無(wú)法完全適配你正在使用的文件類型或 CSS 框架。

此外，PurgeCSS 還有很多配置項(xiàng)，可以根據(jù)需求自定義其行為。例如，PurgeCSS 包括針對(duì)fontFace、keyframes、extractors、CSS等選項(xiàng)。定制化可以改善 PurgeCSS 的性能和效率。PurgeCSS 很容易上手，并提供了詳細(xì)的文檔。截至撰寫本文時(shí)，PurgeCSS 在 npm 上每周下載量超過(guò) 90 萬(wàn)次，GitHub[1]上獲得了 7.4k+ Star。

PurgeCSS 是如何工作的？

PurgeCSS 適合在生產(chǎn)環(huán)境使用，可以分析內(nèi)容和 CSS 并刪除未使用的樣式。在開(kāi)發(fā)過(guò)程中運(yùn)行 PurgeCSS 是沒(méi)必要的，因?yàn)樵陂_(kāi)發(fā)過(guò)程中，可能會(huì)經(jīng)常創(chuàng)建未使用的樣式，這意味著每次都必須運(yùn)行 PurgeCSS。

相反，可以僅針對(duì)生產(chǎn)構(gòu)建運(yùn)行它。這樣，就不必重新創(chuàng)建已刪除的樣式。因此，當(dāng)應(yīng)用準(zhǔn)備好投入生產(chǎn)時(shí)，可以運(yùn)行 PurgeCSS 一次。在開(kāi)始將 PurgeCSS 與流行的庫(kù)/框架一起使用之前，先來(lái)看一下它如何與普通 JavaScript 一起使用。代碼如下：

(async () => {  const purgecss = await new PurgeCSS().purge({    content: ["index.html"],    css: ["style.css"],  });  console.log(purgecss);})();

這里將index.html指定為內(nèi)容之一，將style.css指定為 CSS 之一，可以包含更多的內(nèi)容和 CSS 文件，并且內(nèi)容不限于 HTML 文件。上面的代碼會(huì)返回已清除樣式的數(shù)組。

除了content和css之外，還有更多配置項(xiàng)可以準(zhǔn)確指定想要它做什么以及如何做。上面的例子可以用于任何普通 JavaScript 項(xiàng)目。要使用 PurgeCSS，就需要有一個(gè)單獨(dú)的 JavaScript 文件，其將運(yùn)行一次以刪除未使用的樣式。

可以通過(guò)以下代碼讓清除的樣式替換當(dāng)前樣式：

const { PurgeCSS } = require("purgecss");const fs = require("fs");(async () => {  const purgecss = await new PurgeCSS().purge({    content: ["index.html"],    css: ["style.css"],  });  fs.writeFileSync("style.css", purgecss[0].css);})();

與JS庫(kù)/框架結(jié)合使用

PurgeCSS 與流行的 JavaScript 庫(kù)/框架是兼容的，如 React、Vue、Gatsby、Next.js、Nuxt.js 等。下面來(lái)看看如何將 PurgeCSS 與 React 和 Vue 一起使用。

React + PurgeCSS

首先需要安裝 PurgeCSS 及其依賴項(xiàng)：

npm i --save-dev @fullhuman/postcss-purgecss

打開(kāi) App.js 文件并粘貼以下代碼：

import "./App.css";function App() {  return 
;}export default App;

在上面的代碼中，我們創(chuàng)建了一個(gè)名為App的函數(shù)組件，并返回了一個(gè)類名為 App 的div。App.css保持不變，因此它包含以下未使用的 CSS 代碼：

.App {  text-align: center;}.App-logo {  height: 40vmin;  pointer-events: none;}@media (prefers-reduced-motion: no-preference) {  .App-logo {    animation: App-logo-spin infinite 20s linear;  }}.App-header {  background-color: #282c34;  min-height: 100vh;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  font-size: calc(10px + 2vmin);  color: white;}.App-link {  color: #61dafb;}@keyframes App-logo-spin {  from {    transform: rotate(0deg);  }  to {    transform: rotate(360deg);  }}

打開(kāi)package.json文件并在script下添加以下代碼：

"postbuild": "purgecss --css build/static/css/*.css --content build/index.html build/static/js/*.js --output build/static/css"

post是一個(gè)前綴，可以添加到任何 npm 腳本中，并在運(yùn)行主腳本時(shí)自動(dòng)運(yùn)行。在這個(gè)例子中，postbuild在執(zhí)行構(gòu)建腳本后運(yùn)行。postbuild 執(zhí)行的命令包含三個(gè)選項(xiàng)。

--css選項(xiàng)：指定 PurgeCSS 應(yīng)處理的 CSS 文件，它可以是文件名數(shù)組或全局變量。--content選項(xiàng)：指定 PurgeCSS 應(yīng)分析哪些內(nèi)容。--output選項(xiàng)：指定應(yīng)將純化的 CSS 文件寫入哪個(gè)目錄。默認(rèn)情況下，它將結(jié)果放置在控制臺(tái)中。

本質(zhì)上，postbuild執(zhí)行的命令執(zhí)行以下操作：

檢查build/static/css中的每個(gè) CSS 文件。匹配文件中使用的選擇器并刪除任何未使用的 CSS。在build/static/css中輸出新的 CSS 文件。

現(xiàn)在，只需要運(yùn)行npm run build來(lái)運(yùn)行 React 應(yīng)用的構(gòu)建。要確認(rèn)是否成功，可以打開(kāi)build/static/css中的 CSS 文件。輸出類似于下面的代碼，僅包含使用的 CSS：

body {  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;  margin: 0;}code {  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;}.App {  text-align: center;}@-webkit-keyframes App-logo-spin {  0% {    -webkit-transform: rotate(0deg);    transform: rotate(0deg);  }  to {    -webkit-transform: rotate(1turn);    transform: rotate(1turn);  }}@keyframes App-logo-spin {  0% {    -webkit-transform: rotate(0deg);    transform: rotate(0deg);  }  to {    -webkit-transform: rotate(1turn);    transform: rotate(1turn);  }}

Vue + PurgeCSS

可以通過(guò)以下方式在 Vue 中安裝 PurgeCSS：

vue add @fullhuman/purgecss

這將生成一個(gè)postcss.config.js文件，在這個(gè)文件中已經(jīng)設(shè)置了適合 Vue 應(yīng)用的PurgeCSS 配置?？梢愿鶕?jù)需要更改這些配置。

下面來(lái)更新一些應(yīng)用的內(nèi)容，看看 PurgeCSS 在 Vue 中的工作原理。轉(zhuǎn)到HelloWorld.vue并用以下代碼替換其中的代碼：

<script>export default {  name: "HelloWorld",  props: {    msg: String,  },};</script>

這里減少了內(nèi)容并添加了一些未使用的樣式。現(xiàn)在，在終端中運(yùn)行 npm run build 來(lái)構(gòu)建應(yīng)用并查看最終構(gòu)建的 CSS。最后，在dist/css目錄中打開(kāi) CSS 文件，就可以找到只包含已使用樣式的 CSS 輸出：

a[data-v-70cf4e96] {  color: #42b983;}#app {  font-family: Avenir, Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}

高級(jí)配置選項(xiàng)

上面只看到了三個(gè)配置選項(xiàng)：content、css和outline，下面來(lái)看看如何通過(guò)其他配置選項(xiàng)來(lái)自定義 PurgeCSS。

keyframes 和 fontfaces

在 PurgeCSS v2.0 之前，默認(rèn)刪除未使用的字體和關(guān)鍵幀代碼。然而，當(dāng)這些功能使用不當(dāng)時(shí)，代碼就會(huì)崩潰。未使用的字體和關(guān)鍵幀代碼現(xiàn)在默認(rèn)保持不變?？梢酝ㄟ^(guò)將keyframes和fontfaces選項(xiàng)設(shè)置為true來(lái)更改此默認(rèn)行為：

(async () => {  const purgecss = await new PurgeCSS().purge({    content: ["index.html"],    css: ["style.css"],    keyframes: true,    fontFaces: true,  });  console.log(purgecss);})();

也可以在purgecss.config.js配置文件中修改這些配置項(xiàng)：

// purgecss.config.jsmodule.exports = {  content: ["index.html"],  css: ["style.css"],  keyframes: true,  fontFaces: true,}(async () => {  const purgecss = await new PurgeCSS().purge("./purgecss.config.js");  console.log(purgecss);})();

content 和 css

可以直接傳入content和css的值，而無(wú)需鏈接一個(gè)文件：

// purgecss.config.jsmodule.exports = {  content: [    {      raw: "
Hello world
",      extension: "html",    },  ],  css: [    {      raw: "p { color: red }",    },  ],};

extractors

在極少數(shù)情況下，PurgeCSS 可能無(wú)法刪除未使用的 CSS 或刪除已使用的 CSS。在這種情況下，必須使用自定義提取器。PurgeCSS 依賴提取器來(lái)獲取文件中使用的選擇器列表。

有些軟件包為特定擴(kuò)展提供了提取器。例如，purgecss-from-js特定于.js擴(kuò)展名。使用特定的提取器進(jìn)行擴(kuò)展可以提供最佳的準(zhǔn)確性：

// purgecss.config.jsimport purgeJs from "purgecss-from-js"import purgeHtml from "purgecss-from-html"const options = {  content: ["index.html"],  css: ["style.css"],  extractors: [    {      extractor: purgeJs,      extensions: ["js"]    },    {      extractor: purgeHtml,      extensions: ["html"]    }  ]}export default options

variables

默認(rèn)情況下，不會(huì)刪除未使用的 CSS 變量。如果要?jiǎng)h除它們，則必須在purgecss.config.js文件中將變量指定為true：

module.exports = {    content: ["index.html"],    css: ["style.css"],    variables: true,}

safelist 和 comments

PurgeCSS 支持指定哪些選擇器可以安全地保留在最終的 CSS 中?？梢酝ㄟ^(guò)兩種方式來(lái)完成此操作：PurgeCSS 的safelist選項(xiàng)或特殊的 CSS 特殊注釋。使用safelist：

module.exports = {    content: ["index.html"],    css: ["style.css"],    safelist: ["random", "button"],}

在這種情況下，.random、#random、button、.button和#button都將被忽略，不會(huì)被 PurgeCSS 刪除。其支持使用正則表達(dá)式：

module.exports = {    content: ["index.html"],    css: ["style.css"],    safelist: [/red$/, /^bg/],}

在這種情況下，任何以red結(jié)尾（例如，bg-red、btn-red）或以 bg 開(kāi)頭（例如，bg-blue、bg-red）的選擇器都不會(huì)被刪除。默認(rèn)情況下，PurgeCSS 不會(huì)刪除注釋，僅刪除旨在自定義 PurgeCSS 行為的特殊注釋。

一組常見(jiàn)的特殊注釋用于指定哪些選擇器可以安全地保留在最終 CSS 中：

/* purgecss start ignore */h1 {  color: pink;  font-size: 2rem;}/* purgecss end ignore */

相關(guān)鏈接

[1]GitHub:https://github.com/FullHuman/purgecss。

關(guān)鍵詞：