bootstrap.min.css仅压缩字符未删功能,所有组件和工具类完整保留,体积缩减靠去除空格换行注释,真正减负需从源码层禁用无关模块。

因为 bootstrap.min.css 只做了字符级压缩,没删任何功能代码——你没用的 tooltip、offcanvas、所有断点下的 mt-5 类、深色模式规则、表单全状态伪类,全都在里面。
bootstrap.min.css 本质只是“删空格”,不是“删功能”
bootstrap.min.css 和 bootstrap.css 功能完全一致,区别仅在于前者去掉了换行、空格、注释。v5.3.3 的未压缩版约 210KB,压缩后约 70KB(gzip 后约 20–25KB),但所有组件样式仍完整保留。
- 它不识别你项目里是否写了
data-bs-toggle="modal",也不管你有没有用bg-gradient - 哪怕你只用了
container和btn,carousel的动画帧、popover的 z-index 层叠、offcanvas的 transform 偏移照样加载 - 所有 5 个断点(
xs/sm/md/lg/xl)下每个间距工具类都重复生成,比如mt-3在每个断点各有一条声明
真正撑体积的是那些“默认开启但你根本不用”的模块
这些内容在压缩前后都存在,只是被压缩器一并塞进了 bootstrap.min.css:
-
:focus-visible和:focus-within的 polyfill 规则(尤其为 IE11 兼容准备的冗余降级) - 深色模式相关样式(
[data-bs-theme="dark"]开头的所有规则),即使 HTML 根节点没加这个属性 - 表单控件的完整状态链:
:valid、:invalid、:user-invalid、[aria-invalid]等叠加组合,多数项目只用其中一两个 -
utilities模块中未禁用的子集,比如你从不用阴影,但shadow-sm到shadow-5全在
CDN 引入时容易忽略的叠加膨胀
你以为只引入了 bootstrap.min.css,其实可能还悄悄多载了几倍体积:
立即学习“前端免费学习笔记(深入)”;
- 同时引入
bootstrap-icons.css(+120KB),哪怕你只用了 2 个图标 - 某些国内镜像缓存的老版本含 IE hack,比官方新版多出 15KB+ 冗余
- Webpack/Vite 项目里,如果既
@import "bootstrap/scss/bootstrap"又通过 CDN 加载bootstrap.min.css,会双重加载 - 没配
integrity属性,浏览器无法复用跨站缓存,反而触发额外请求
压缩只是第一步,真正要砍体积,得动到源码层——删掉没用的 @import、精简 $grid-breakpoints、关闭不用的 utility 组。否则,bootstrap.min.css 再小,也是把整座山压成一张薄饼,重量没变,只是更难消化。


















