应按需引入 bootstrap 组件：用 sass 手动导入所需模块，禁用未用 js 插件，清理图标字体与 print.css，并排查第三方库隐式依赖。
只引入需要的 Bootstrap CSS 组件
Bootstrap 的 bootstrap.min.css 默认包含全部组件，但多数项目只用到 Button、Grid、Navbar 等少数几个。全量引入会让 CSS 体积多出 100KB+（gzip 后仍约 20KB），且无法被 tree-shaking 消除。
推荐做法是用 Sass 源码手动导入：
- 删掉
node_modules/bootstrap/dist/css/bootstrap.min.css的直接引用 - 在自定义
main.scss中按需引入：@import "~bootstrap/scss/functions"; @import "~bootstrap/scss/variables"; @import "~bootstrap/scss/mixins"; @import "~bootstrap/scss/grid"; @import "~bootstrap/scss/buttons";
- 避免导入
reboot或utilities全集；如只需部分工具类，改用bootstrap/scss/utilities/_spacing这类粒度更细的文件
禁用未使用的 Bootstrap JS 插件
通过 bootstrap.bundle.min.js 引入 JS 时，所有插件（Dropdown、Modal、Tooltip 等）都会被打包进来，哪怕你只用了 Toast。Webpack 或 Vite 默认不会自动剔除未调用的插件代码。
正确做法是按需加载单个插件模块：
- 不要 import
"bootstrap"或"bootstrap/dist/js/bootstrap.bundle.min.js" - 改用 ES 模块方式导入所需插件：
import { Toast } from 'bootstrap'; new Toast(document.getElementById('myToast')); - 确保构建工具支持 ESM 解析（Vite 默认支持；Webpack 需
experiments.topLevelAwait: true或使用import()动态导入） - 注意：某些插件依赖
Util和Dom工具函数，但现代版本已自动处理，无需手动引入
关闭 Bootstrap 自带的图标字体和非必要资源
Bootstrap 5.3+ 默认不再内置图标，但很多老项目仍保留 bootstrap-icons 或从旧版迁移而来。这些图标字体文件（bootstrap-icons.woff2）常被无意识打包进最终产物，增加 50–80KB。
检查并清理：
- 搜索项目中是否显式 import
bootstrap-icons/font/bootstrap-icons.css或类似路径 - 确认
public/目录下没有残留的fonts/bootstrap-icons.woff2等文件 - 如果确实需要图标，优先用 SVG 内联或按需加载单个图标，而非整套字体
- 另外，Bootstrap 的
print.css在绝大多数 Web 应用中完全无用，确保没在 HTML 中通过<link rel="stylesheet" href="..." media="print">引入
警惕第三方库悄悄拖入完整 Bootstrap
有些 UI 组件库（比如旧版 vue-bootstrap、ng-bootstrap 的早期版本）或脚手架模板会默认依赖 bootstrap 全量包，即使你没直接写 import，它也会出现在 node_modules 并被 Webpack 一并打包。
排查方法：
- 运行
npx source-map-explorer dist/static/js/*.js（需先构建并生成 sourcemap）定位体积大户 - 检查
package-lock.json或yarn.lock中是否有间接依赖了bootstrap的包 - 用
npm ls bootstrap查看依赖树，重点看是不是被devDependencies或测试工具（如某些 e2e 测试框架）带进来的 - 若确认不需要，可用
resolutions（yarn）或overrides（npm >=8.3）强制降级或替换为精简版
真正难处理的不是怎么删，而是删完后某个隐藏的 data-bs-toggle 行为突然失效——因为那个功能其实来自被你删掉的 collapse 插件，而你只记得自己没写 JS 调用它。这种隐式依赖最容易漏查。
