直接引入bootstrap.min.css是首屏卡顿主因，因其强制加载150–200KB未用样式；按需导入Sass模块可将CSS从180KB压至60–90KB，须严格按functions→variables→mixins顺序前置导入。
直接引入 bootstrap.min.css 是首屏卡顿的主因，不是 Bootstrap 本身慢，而是你加载了根本没用的 150–200KB CSS 规则——比如 carousel、tooltip、offcanvas 的样式，哪怕页面里一个轮播图都没放。
为什么按需导入 Sass 模块能减半 CSS 体积
Bootstrap 5+ 的 scss/ 目录是真正模块化的：每个组件（grid、buttons、utilities）都独立成文件，且依赖链清晰。全量 @import "bootstrap/scss/bootstrap" 会无差别拉入全部 40+ 个模块；而手动只导入实际用到的，可把最终 CSS 从 180KB 压到 60–90KB（实测中位数）。
关键约束有三点：
-
functions→variables→mixins必须按序前置导入，否则像grid会报SassError: Undefined variable "$grid-columns" -
root和reboot推荐保留，它们提供基础重置与 CSS 自定义属性，体积小（合计 -
type、images、tables这类模块，若项目纯表单/卡片页且未改默认文字样式或图片行为，可安全跳过
如何验证哪些 CSS 真正被用了
别靠“我觉得没用”删模块——浏览器会骗你。真实未使用 CSS 只有在 DevTools 的 Coverage 面板里才看得见：
- 打开 Chrome DevTools → More Tools → Coverage → 刷新页面 → 查看
main.css行覆盖率（常低于 30%） - 再点某行高亮的未使用 CSS，右键 Reveal in Sources，就能定位到是哪个
@import引入的（比如scss/tooltips.scss） - 注意：Coverage 统计的是“未执行的规则”，不等于“可删除的模块”——有些样式虽未触发，但 JS 初始化组件时会动态加 class，必须结合 DOM 实际结构判断
Grid 和 Utilities 的导入顺序与陷阱
grid 和 utilities 看似简单，但错序或漏依赖会导致编译失败或响应式断层：
- 必须在
grid前导入variables，否则$grid-breakpoints未定义，.col-md-6这类断点类根本不会生成 -
utilities要放在grid后——因为它的spacing、flex工具类依赖grid里定义的断点映射（$spacers、$grid-breakpoints） - 若只用
col-*不用gap-*或text-center，可拆分导入：@import "bootstrap/scss/utilities/_spacing"替代整包utilities，再省 10–15KB
最容易被忽略的是：即使你严格按需导入了 Sass，如果构建工具（如 Vite 或 Webpack）仍把 node_modules/bootstrap 整体打进 vendor chunk，那所有模块又会被打包进一个大 JS 文件里——查 dist/assets/ 下的 chunk 文件名和体积，确认没有 vendor-bootstrap 这类命名，才是真裁剪到位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
