purgecss通過靜態分析移除未使用的css，但在vue/react項目中動態類名易導致誤刪。1. 配置content選項覆蓋所有可能使用css的文件；2. 使用safelist保留動態類名或正則匹配白名單；3. 用模板字符串替代類名拼接提升識別率；4. 開發環境禁用purgecss便于調試；5. 生產構建后檢查css確保必要類保留；6. 對JavaScript動態生成的類需手動加入白名單；7. vue scoped css需確保配置包含.vue文件；8. css modules需將hash類名加入safelist或用正則匹配。
PurgeCSS通過靜態分析你的代碼來移除未使用的CSS，但在Vue/React這類動態組件化的項目中，CSS類的生成和使用往往是動態的，這給PurgeCSS帶來了挑戰。簡單來說，你需要讓PurgeCSS“看”到那些動態生成的類名，才能避免誤刪。
解決方案
核心思路就是讓PurgeCSS在掃描代碼時，能夠覆蓋到所有可能用到的CSS類名。這通常需要結合配置和代碼層面的技巧。
立即學習“前端免費學習筆記（深入）”；
-
詳細配置PurgeCSS：
-
content選項： 這是最基礎的，確保content選項包含了所有可能用到CSS的地方，包括.vue、.JSx、.html以及任何可能動態生成類名的JS文件。
// 示例：purgecss.config.js module.exports = { content: [ './public/**/*.html', './src/**/*.vue', './src/**/*.jsx', './src/**/*.js', ], css: ['./dist/css/*.css'], // 你的CSS文件 // ...其他配置 } -
safelist選項： 這個選項允許你強制保留某些CSS類名，即使PurgeCSS認為它們沒有被使用。 這對于動態生成的、PurgeCSS無法直接識別的類名非常有用。
// 示例：purgecss.config.js module.exports = { // ...其他配置 safelist: [ 'keep-me', // 始終保留這個類 /^dynamic-/, // 保留所有以"dynamic-"開頭的類 ], }
-
-
動態類名處理：
-
使用模板字符串和CSS變量： 盡量避免直接拼接字符串來生成類名，這會讓PurgeCSS難以識別。 使用模板字符串和CSS變量可以提高代碼的可讀性和可維護性，同時也有助于PurgeCSS的靜態分析。
<template> <div :class="`base-class ${dynamicClass}`"></div> </template> <script> export default { data() { return { dynamicClass: 'active-state', }; }, }; </script> -
創建CSS類名白名單： 如果你的動態類名邏輯非常復雜，可以考慮維護一個CSS類名白名單，并在PurgeCSS的safelist中使用正則表達式來匹配這些類名。
// 示例：css-whitelist.js const whitelist = [ 'class-a', 'class-b', 'class-c', // ... ]; module.exports = whitelist; // purgecss.config.js const whitelist = require('./css-whitelist.js'); module.exports = { // ...其他配置 safelist: [ ...whitelist, // 直接引入白名單 new RegExp(`^(${whitelist.join('|')})$`), // 使用正則表達式 ], }
-
-
postcss插件：
- postcss-plugin-purgecss： 如果你的項目使用了PostCSS，可以使用postcss-plugin-purgecss插件，它可以更方便地集成PurgeCSS到你的構建流程中。 確保你的PostCSS配置正確，并且PurgeCSS的配置也正確傳遞給了插件。
-
開發環境調試：
- 禁用PurgeCSS： 在開發環境中，可以暫時禁用PurgeCSS，以便查看所有CSS類是否都正確生效。 這可以幫助你快速定位問題，并調整PurgeCSS的配置。
-
構建環境測試：
- 仔細檢查： 在生產構建完成后，仔細檢查生成的CSS文件，確保所有必要的CSS類都被保留。 如果發現有類被錯誤地移除，需要調整PurgeCSS的配置或代碼。
PurgeCSS 如何處理 JavaScript 中的動態類名？
PurgeCSS會嘗試解析JavaScript文件中的字符串，尋找可能的CSS類名。 但是，它無法執行JavaScript代碼，所以對于完全動態生成的類名（例如，基于用戶輸入生成的類名），PurgeCSS通常無法識別。 這就是為什么我們需要使用safelist選項或創建CSS類名白名單。 PurgeCSS的解析能力有限，需要我們主動提供更多信息。
如何處理 Vue 的 scoped CSS？
Vue 的 scoped CSS 通過在類名后添加hash值來保證組件的樣式獨立性。PurgeCSS 通常可以正確處理 scoped CSS，因為它會解析 Vue 組件的模板，并找到這些帶有hash值的類名。 但需要確保你的PurgeCSS配置正確包含了.vue文件，并且沒有錯誤地移除Vue生成的hash值。
PurgeCSS 誤刪了我的 CSS 類，我該怎么辦？
首先，仔細檢查你的PurgeCSS配置，確保content選項包含了所有可能用到CSS的地方。 然后，檢查safelist選項，確保沒有遺漏任何需要保留的類名。 可以使用瀏覽器的開發者工具來查看哪些類被移除了，并根據情況調整PurgeCSS的配置或代碼。 如果問題仍然存在，可以嘗試禁用PurgeCSS，并逐步排查問題。 另外，確保你的CSS文件沒有語法錯誤，這可能會導致PurgeCSS解析失敗。
PurgeCSS 對 CSS Modules 有什么影響？
CSS Modules 通過將CSS類名轉換為唯一的hash值來避免命名沖突。PurgeCSS 可以與 CSS Modules 一起使用，但需要確保你的PurgeCSS配置正確包含了生成的CSS Modules文件，并且沒有錯誤地移除這些hash值。 通常情況下，你需要將CSS Modules生成的類名添加到safelist選項中，或者使用正則表達式來匹配它們。
