移动端首屏卡顿主因是资源冗余而非Bootstrap本身：全量加载CSS/JS（超300KB）、未裁剪无用组件、图标用字体方案、CDN未优化及300ms点击延迟。
移动端加载慢，八成不是 Bootstrap 本身的问题，而是你加载了根本用不到的 CSS、JS 和图标资源。删掉不用的部分，比调任何构建参数都管用。
为什么 Bootstrap 在手机上首屏卡顿
常见错误现象：FCP（首次内容绘制）超 2s、CLS（累积布局偏移）突增、点击按钮有明显 300ms 延迟；实际测下来，bootstrap.min.css 单文件常占 150–200KB（未压缩），bootstrap.bundle.min.js 再加 80KB+，再加上整套 bootstrap-icons 字体（1MB+），首屏 JS/CSS 总量轻松破 300KB —— 这在 3G 或弱网下就是白屏几秒。
真正瓶颈不在框架逻辑，而在资源冗余和加载时机：
- 全量引入
@import "bootstrap/scss/bootstrap"或import 'bootstrap/dist/css/bootstrap.min.css'，等于把 carousel、tooltip、popover 全塞进首屏 -
data-bs-toggle组件（如 dropdown）首次点击仍卡，因内部依赖click事件且未提前绑定touchend - 图标用字体方案而非 SVG 内联，导致额外 HTTP 请求 + FOIT（字体闪烁）
- CDN 链接没加
integrity，浏览器无法复用跨站缓存，还可能降级到非压缩版本
按需编译 Sass 模块最干净的裁剪方式
完整版 bootstrap.min.css 通常超 200KB，但多数项目只用 grid、buttons、utilities 这几个模块。Sass 源码按需导入是最可控的裁剪手段：
必须前置导入：functions、variables、mixins —— 否则后续模块会报 SassError: Undefined variable "$grid-columns"
可安全注释掉的模块（根据真实使用情况）：
-
@import "bootstrap/scss/carousel";（轮播图不用就删） -
@import "bootstrap/scss/modal";（弹窗没用就别留着） -
@import "bootstrap/scss/images";（<img>样式基本没人动） -
@import "bootstrap/scss/tables";（纯表单页可跳过）
别在 main.scss 里写 @import "bootstrap/scss/bootstrap" —— 这等于又回到了全量加载。
JavaScript 组件必须显式导入，禁用自动初始化
全量引入 bootstrap/dist/js/bootstrap.bundle.min.js 会把 Popper、Modal、Dropdown 全打进首屏 JS，哪怕你只点了一个按钮。
正确做法是 ES 模块方式显式导入：
- 只用按钮：
import { Button } from 'bootstrap/js/dist/button' - 需要折叠菜单：
import { Collapse } from 'bootstrap/js/dist/collapse' - 非关键组件（如侧边栏）延迟加载：
import('bootstrap/js/dist/collapse')放在点击回调里
注意：data-bs-toggle 类组件默认依赖全局初始化，若你没引入 bootstrap/js/dist/bootstrap，它们不会自动工作 —— 这反而是好事，避免无谓执行。
如果用了 Vite 或 Webpack，千万别在 JS 中 import 'bootstrap/scss/bootstrap' —— 这会让 CSS 构建失去控制权，样式可能重复打包进 vendor chunk。
CDN 加速 + touch-action 双管齐下解决移动延迟
国内访问慢？换 BootCDN 而非 jsDelivr：https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css，实测快 40%。
必须加 integrity 属性，否则浏览器不复用缓存，还可能被篡改；末尾带精确版本号（如 @5.3.0），避免意外升级破坏样式。
300ms 点击延迟？直接加 touch-action: manipulation：
- 全局生效：
body { touch-action: manipulation; } - 局部生效（推荐）：
.btn, [data-bs-toggle] { touch-action: manipulation; }
但注意：data-bs-toggle 组件首次点击仍可能卡，因为 Bootstrap 内部监听的是 click，而移动端触发 click 前要等 300ms。稳妥解法是在初始化后手动补监听：
const btn = document.querySelector('[data-bs-toggle="dropdown"]');
btn.addEventListener('touchend', e => {
e.preventDefault();
btn.click();
});
别再用 fastclick.js —— Chrome 32+ 已内置等效逻辑，再加载反而增加 JS 执行负担，还容易和 Bootstrap 的事件委托冲突。
最容易被忽略的一点：图标。Bootstrap Icons 默认字体方案会强制加载整套 1MB+ 字体文件。首屏友好方案只有两个：SVG 内联，或雪碧图。其他都是障眼法。
