PurgeCSS对Bootstrap失效率高，因其依赖静态扫描，无法识别data-bs-*属性、JS动态拼接类名、模板条件渲染的utility类及@extend生成的复合选择器。
直接用 PurgeCSS 剔除 Bootstrap CSS 冗余代码，效果有限且容易出错——它无法安全识别动态类名、JS 注入的 class、或 data-bs-* 属性触发的样式，反而可能删掉正在用的规则。
为什么 PurgeCSS 对 Bootstrap 失效率高
PurgeCSS 依赖静态扫描 HTML/JS 中出现的类名，但 Bootstrap 5+ 的很多关键行为不靠显式 class：
-
data-bs-toggle="modal"触发的 modal 样式不会出现在你的源码里，PurgeCSS 看不到 -
btn-primary可能由 JS 动态拼接：element.className = 'btn btn-' + type，静态分析直接漏掉 - utility 类如
mb-3、d-none常在 JS 逻辑中切换，或通过模板引擎条件渲染，PurgeCSS 很难覆盖全 - Bootstrap 内部用
@extend和 mixin 生成的复合选择器（如.btn.btn-outline-primary）可能被误判为未使用
真正有效的 CSS 体积控制路径
放弃 PurgeCSS，改用 Bootstrap 官方支持的、可预测的裁剪方式：
- 只在
main.scss中导入必需模块：@import "bootstrap/scss/functions"、@import "bootstrap/scss/variables"、@import "bootstrap/scss/mixins"，再按需加@import "bootstrap/scss/grid"、@import "bootstrap/scss/buttons"等 - 彻底删除
@import "bootstrap/scss/bootstrap"或import 'bootstrap/dist/css/bootstrap.min.css'这类全量引用 - 禁用未用组件：注释掉
@import "bootstrap/scss/modal"、@import "bootstrap/scss/tooltip"等，比任何后处理都干净 - 构建后检查最终 CSS 是否含
.carousel、.offcanvas等关键词——如果还有，说明 import 没清理干净或被其他依赖间接引入
如果你坚持要用 PurgeCSS，请绕开这些坑
仅当项目已完全脱离 Bootstrap JS、且所有 class 都写死在模板中时才考虑，同时必须：
立即学习“前端免费学习笔记（深入）”；
- 在
purgecss配置的defaultExtractor中显式保留data-bs-*属性匹配逻辑 - 把所有 utility 类前缀加入
whitelistPatterns：/^d-/、/^m-/、/^p-/、/^text-/、/^bg-/ - 确保
content字段包含所有 JS 模板字符串和服务器端渲染输出路径，否则class="${type}"类场景必漏 - 每次升级 Bootstrap 版本后重新验证：
.dropdown-menu是否还在？.visually-hidden是否被删？
最常被忽略的一点：即使 PurgeCSS 成功删掉 80% 的 CSS 字节，若服务器没开 Brotli，传输体积仍可能比不开 PurgeCSS 但启用 Brotli 的 bootstrap.min.css 更大——压缩算法比删除更可靠。先确认 Nginx 有 gzip on 或现代 CDN 已启用 Brotli，再动代码。
