直接引入bootstrap.min.css是体积失控起点，因其仅删空格注释而保留全部组件、断点工具类、深色模式及表单伪类等冗余代码；真正减负须从Sass按需@import、精简$grid-breakpoints与$utilities变量入手。
直接引入 bootstrap.min.css 就是体积失控的起点
你看到的 bootstrap.min.css（v5.3.3 约 70KB，gzip 后 20–25KB）只是“删了空格”，不是“删了功能”。哪怕你只用了 .container 和 .btn，carousel 的动画帧、offcanvas 的 transform 偏移、所有断点下的 mt-5、深色模式规则、表单全状态伪类（:valid / :invalid / [aria-invalid]）全都在。它不看你的 HTML 里有没有 data-bs-toggle="modal"，只管打包。
用 Sass 按需 @import 是最可控的精简方式
前提是你项目已支持 Sass 构建（Webpack + sass-loader 或 Vite）。操作路径很明确：
- 删掉对
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"; @import "bootstrap/scss/forms/form-control"; // 只要基础输入框，不引整个 forms
注意：bootstrap/scss/bootstrap 是“全量入口”，绝不能直接 @import 它——那和引入 bootstrap.min.css 没区别。
精简 $utilities 和 $grid-breakpoints 能砍掉近 1/3 工具类体积
Bootstrap 5 的 utility 类（mt-3、fw-bold）默认为全部 5 个断点（xs/sm/md/lg/xl）生成规则，但多数项目只用 xs 和 md。不改配置，就等于为没用的屏幕尺寸多打几套 CSS。
- 在自定义 Sass 文件顶部先覆盖
$grid-breakpoints：
$grid-breakpoints: ( xs: 0, md: 768px );
- 再重写
$utilities，注释掉不用的组，比如完全不用阴影，就把shadow相关项整块删掉 - 禁用 hover/focus 状态变体可进一步缩小，但按钮、表单交互依赖这些——别一刀切关，先确认哪些组件真不需要
PurgeCSS 是兜底手段，但有硬伤
它适合已有大量 HTML/JSX/Vue 模板的项目，通过扫描源码中出现的类名反向剔除未使用的 CSS 规则。但它无法识别动态拼接的类名，比如 className={`btn-${type}`} 中的 type 值运行时才确定，静态分析抓不到。
- 必须显式配置
whitelist或content字段，否则连btn-primary都可能被误删 - 对 JS 中通过
classList.add()动态添加的类同样无能为力 - 它不解决“为什么一开始要生成那么多规则”的问题，只是事后清扫；Sass 层面按需引入 + 精简变量，才是源头控制
真正省体积的关键，从来不是压缩或删除，而是从第一行 @import 开始就拒绝加载没用的东西。越晚干预（比如等打包完再用 PurgeCSS），越容易漏、越难验证。
