真正压低FCP必须砍掉80%未用样式；仅保留container/row/col/btn/form-control可将CSS gzip体积从22KB降至8–10KB，需配合PurgeCSS白名单或Sass按需导入，并确保Brotli、integrity、加载顺序等细节到位。
直接换 bootstrap.min.css 只能解决 20% 的问题；真正压低 FCP，必须砍掉你根本没用的那 80% 样式。
为什么只换 .min 文件远远不够
完整版 bootstrap.min.css（v5.3.3）gzip 后约 22KB，看似不大，但它包含 tooltip、popover、carousel、offcanvas 等全部组件样式——哪怕你页面里一个都没用。这些冗余规则仍要被浏览器下载、解析、构建 CSSOM，阻塞首屏绘制。
- 实测：仅保留
container、row、col、btn、form-control五个模块，CSS gzip 体积可压到 8–10KB - 工具链不匹配时，
purgecss会漏掉 JS 动态添加的 class（如document.body.classList.add('d-none')），必须手动加白名单 - CDN 链接若缺失
integrity或crossorigin，Brotli 缓存失效，实际传输反而更慢
三种可行路径，按项目类型选
纯静态页 / 老系统嵌入 / 邮件模板等无法走构建流程的场景，只能靠子集化工具扫描 HTML：
- 运行
purgecss --css node_modules/bootstrap/dist/css/bootstrap.min.css --content "*.html" --output dist/css/ - 务必加
--keyframes（否则动画失效），并用--whitelist补全 JS 动态类名，例如['fade', 'show', 'd-none'] - 注意：它不分析 JS 文件里的字符串拼接（如
el.className = 'btn btn-' + type），这类需人工识别后加入白名单
现代构建项目（Webpack/Vite + Sass）应直接改源码导入：
立即学习“前端免费学习笔记（深入）”；
- 删掉
import 'bootstrap/dist/css/bootstrap.min.css' - 新建
src/custom-bootstrap.scss，只@import真正需要的模块，例如：@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @import "bootstrap/scss/components/buttons"; @import "bootstrap/scss/layout/container"; - 若不用响应式工具类，覆盖
$grid-breakpoints，只留(xs: 0, md: 768px)，避免生成多余断点类
别忽略的加载细节
bootstrap.min.css 必须放在 最顶部，早于所有自定义 CSS。否则你的 .my-btn { background: red } 可能因优先级被 Bootstrap 的 .btn.btn-primary 覆盖，触发重绘延迟。
- 服务器必须启用 Brotli（优先）或 gzip；未压缩的 70KB
bootstrap.min.css，Brotli 后可压至 22KB，而 gzip 仅到 25–26KB - CDN 链接必须带
integrity属性，且值与官方一致（如 jsDelivr 的sha384-开头哈希），否则跨站缓存不复用 - 如果用了
bootstrap.bundle.js，确认是否真需要 Popper —— 若只用Alert或Toast，可改用bootstrap.esm.js并手动引入所需组件
最易被忽略的一点：PurgeCSS 或 Sass 按需编译后，务必检查控制台是否有「Failed to resolve…」警告，以及是否漏掉了深色模式、打印样式或无障碍相关类（如 .sr-only、@media print 规则），这些往往不在 HTML 模板里显式出现，但影响功能完整性。
