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选项中，或者使用正则表达式来匹配它们。
