Bootstrap加载慢主因是冗余代码，应按需引入CSS/JS模块、禁用图标字体、延迟加载非关键组件、CDN引入须带SRI和精确版本号，并持续删减无用代码。
Bootstrap网页加载慢，九成不是框架本身的问题，而是你把没用的 CSS、JS、图标全塞进了首屏。删掉不用的部分，比调任何构建参数都管用。
只编译实际用到的 Sass 模块
完整版 bootstrap.min.css 通常超 200KB，但多数项目只用 grid、buttons、utilities。直接 @import "bootstrap/scss/bootstrap" 就等于放弃控制权。
- 必须前置导入：
@import "bootstrap/scss/functions"、@import "bootstrap/scss/variables"、@import "bootstrap/scss/mixins"，否则后续模块会报SassError: Undefined variable "$grid-columns" - 按需引入组件：比如只用折叠菜单，就只写
@import "bootstrap/scss/collapse"；不用轮播图，就彻底删掉@import "bootstrap/scss/carousel" - 禁用整套图标字体：
@import "bootstrap/scss/icons"单独占 1MB+，且触发 FOIT；改用内联 SVG 或按需导出 SVG sprite
JavaScript 组件必须显式导入，禁用自动初始化
全量引入 bootstrap.bundle.min.js 会让 Popper、Modal、Tooltip 全打进首屏 JS，哪怕你页面里一个弹窗都没用。
- 改用 ES 模块方式：如只需按钮交互，只写
import { Button } from 'bootstrap/js/dist/button' - 非关键组件延迟加载：侧边栏折叠逻辑可等用户首次点击后再
import('bootstrap/js/dist/collapse') - 确保构建工具没把整个
node_modules/bootstrap打进 vendor chunk——查生成的 chunk 文件名和体积就能验证
CDN 引入必须加 SRI + 压缩 + 精确版本号
很多人换 CDN 后反而更慢，问题出在没加校验、用了未压缩版、或链接末尾没锁死版本。
-
<link>必须带integrity属性，否则浏览器无法复用跨站缓存，还可能被中间人篡改 - 只用官方
.min.css和.min.js，别用未压缩版本；CDN 链接末尾必须带@5.3.3这类精确版本号 -
<link>放在最顶部，且服务器必须启用 Brotli（优先）或 gzip 压缩
最容易被忽略的是：你删掉的那些模块，得真没用——别留着“以防万一”。每多一行 @import 或 import，都在悄悄拖慢首屏。优化不是加东西，是持续做减法。
