优化Bootstrap加载速度的核心是删减未用代码、减少HTTP请求、确保资源就近加载：用PurgeCSS剔除冗余CSS，按需导入JS组件，国内项目优先使用HTTPS协议的BootCDN并启用HTTP/2。
直接用完整 Bootstrap 会拖慢网页加载速度，不是它写得不好，而是你大概率没用全——默认引入的 CSS 和 JS 里，60% 以上代码在你的页面里根本不会执行。要提速，核心就三条：砍掉不用的、让浏览器少请求、确保资源就近加载。
怎么删掉 Bootstrap 里你根本不用的 CSS
Bootstrap 的 bootstrap.min.css 默认包含所有组件样式（网格、表单、模态框、轮播……），但一个企业官网可能只用到按钮、导航栏和卡片。保留全部等于让每个用户都为没用的代码买单。
- 用
PurgeCSS扫描你的 HTML 和 JS 文件，自动剔除未使用的类名。例如在package.json中配置："css-purge": "purgecss --css assets/css/starter.css --content \"index.html src/js/**/*.js\" --output assets/css/" - 注意
--content参数必须覆盖所有实际用到 Bootstrap 类的地方，比如 Vue/React 组件里的字符串模板、动态 class 绑定，漏掉就会误删 - 如果用了关键帧动画（如
fade、slide），加--keyframes参数，否则动画失效 - 实测：某后台项目从 192KB 的 CSS 压到 58KB，首屏渲染时间下降 32%
怎么只加载你需要的 JS 组件
直接引入 bootstrap.bundle.min.js 是最省事的做法，但它把 Popper、所有插件（Tooltip、Modal、Dropdown……）全塞进一个文件里。如果你页面里根本没用 Tooltip，它的 JS 逻辑、事件监听器、DOM 查询全白跑了。
- 改用按需导入：用 ES 模块方式只 import 当前页面需要的组件，例如：
import { Modal } from 'bootstrap'，再手动初始化 - 若仍用 CDN，至少避免
bootstrap.bundle.min.js，改用bootstrap.min.js（不含 Popper）+ 单独引入@popperjs/core，方便后续替换或打补丁 - 警惕第三方插件（如
bootstrap-select）自动注册全局组件——它们常隐式依赖完整 Bootstrap JS，导致你删了部分模块后报错TypeError: Cannot read property 'getInstance' of null
CDN 引入为什么有时反而更慢
CDN 不是万能加速器。国内用户访问 jsDelivr 或 UNPKG 的国际节点，首字节时间可能超过 300ms；而 BootCDN 虽快，但若你页面是 HTTPS，却写了 http://cdn.bootcdn.net/...，浏览器直接拦截资源，页面功能直接残缺。
- 国内项目无条件优先用
https://cdn.bootcdn.net/，地址示例：<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet"> - 务必检查 Network 面板里每个 Bootstrap 资源的
Protocol列是否为h2或h3，HTTP/2+ 才能复用连接，否则多个 CSS/JS 请求仍串行阻塞 - 别忽略 SRI（Subresource Integrity）：加了
integrity属性后，若 CDN 返回内容哈希不匹配（如被劫持或版本更新未同步），浏览器会拒绝执行——这既是安全机制，也是个隐藏的加载失败原因
真正卡顿的从来不是 Bootstrap 本身，而是“我以为它只是个 CSS 框架，结果它悄悄加载了 7 个 JS 插件、1200 行未使用样式、3 个字体文件”。优化不是调参数，是持续确认：这个类，此刻真被用到了吗？这个 JS，真的跑起来了么？
