Bootstrap CSS 体积超200KB主因是默认全量打包：含5断点下重复间距类、:focus-visible等伪类polyfill、深色模式样式、表单全状态链及offcanvas等非核心组件CSS；可改用grid-only版（8KB）或Sass定制编译。
Bootstrap CSS 为什么动辄 200KB+？
因为默认打包了所有组件、状态、响应式断点、主题变体和浏览器兼容补丁——哪怕你只用了一个 btn 类。
哪些内容最占体积？
真正撑大文件的不是基础栅格或排版，而是这些被默认包含但常被忽略的部分：
-
:focus-visible、:focus-within等现代伪类的降级 polyfill 规则（尤其在 IE11 兼容模式下） - 全部 5 个断点（
xs/sm/md/lg/xl）下每个间距工具（mt-3、px-5…）的重复声明 - 深色模式（
data-bs-theme="dark"）相关样式，即使你没启用 - 所有表单控件的完整状态链：
:valid、:invalid、:user-invalid、[aria-invalid]等叠加规则 - 非核心组件如
offcanvas、tooltip、popover的 CSS（含动画帧、z-index 层叠、定位偏移等）
怎么快速砍掉一半体积？
不依赖构建工具也能见效：直接改用官方提供的精简版本或手动定制。
- 换用
bootstrap.min.css而非未压缩版（可减 30%–40%，但只是压缩，非删减） - 改用
bootstrap-grid-only.min.css（仅栅格，约 8KB）或bootstrap-reboot.min.css（仅重置，约 2KB） - 从 Sass 源码 重新编译：注释掉不需要的
@import行（比如跳过forms、dropdowns） - 用
purgecss扫描 HTML/JS 中实际用到的类名（注意：需处理动态类名如btn-${type}，否则误删）
CDN 引入时容易忽略的陷阱
很多人以为用 CDN 就“省事”，其实反而更难控制体积：
立即学习“前端免费学习笔记（深入）”；
- CDN 上的
bootstrap.min.css是全量版，无法按需剔除 - 某些国内镜像（如 jsDelivr 的旧链接）可能缓存了带 IE hack 的老版本，多出 15KB+ 冗余
- 若同时引入
bootstrap.min.css和bootstrap-icons.css，后者又额外增加 120KB（图标字体 + SVG sprite） - Webpack/Vite 项目里如果同时
@import了 Bootstrap Sass 和通过 CDN 加载 CSS，会造成双重加载
data-bs-toggle="modal" 却没引入对应 CSS，控制台不报错但样式错乱；或者删了 transitions 模块后，所有 fade 动画失效却找不到原因。这类问题不会体现在文件大小上，但会让“精简”变成负优化。 
