应按需引入Bootstrap组件：用Sass手动导入所需模块，禁用未用JS插件，清理图标字体与print.css，并排查第三方库隐式依赖。
如果您在使用Bootstrap框架时发现页面加载缓慢、首屏渲染延迟或构建产物体积异常增大，则很可能是由于框架引入了大量未使用的代码。以下是针对Bootstrap代码冗余与文件体积问题的具体分析与应对路径：
一、Bootstrap核心体积构成解析
Bootstrap的体积并非单一文件决定，而是由CSS样式层、JavaScript行为层及依赖运行时共同叠加形成。其冗余主要来源于未启用组件的样式规则残留、全局JS初始化逻辑、以及为兼容性预置的冗余媒体查询和前缀声明。
1、Bootstrap 5.3完整压缩包（CSS + JS，不含图标）gzip后约60KB，其中CSS占约20KB，JS占约40KB；
2、Pure CSS同功能实现（仅网格+按钮+表单）gzip后仅3.7KB，对比凸显Bootstrap中未使用组件仍参与构建输出的问题；
3、TODC Bootstrap通过Sass模块化导入可将最终CSS体积压缩至原体积的30%–50%，证实冗余具有高度可裁剪性。
二、CSS层冗余来源与定位方法
CSS冗余体现为大量未被DOM节点匹配的样式声明，尤其在未启用carousel、modal、popover等组件时，其对应类名选择器仍保留在最终CSS中，造成无效字节传输。
1、检查项目中实际使用的类名（如btn、navbar、col-md-6），比对bootstrap.css源码中对应@import语句；
2、使用PurgeCSS或UnCSS工具扫描HTML模板，生成未使用选择器白名单；
3、在构建流程中接入postcss-purgecss插件，自动剔除未命中类名；
4、验证输出CSS中是否仍存在.carousel-inner、.modal-backdrop等明确未在项目中调用的组件选择器。
三、JavaScript层冗余触发场景
Bootstrap JS默认打包全部组件构造函数与事件监听器，即使项目仅使用Tooltip，Dropdown、Collapse等模块代码仍被包含在bundle中，且无法被Webpack Tree Shaking自动消除，因其导出方式非ESM静态结构。
1、弃用bootstrap.bundle.js，改用ES模块化入口js/index.esm.js；
2、按需导入所需组件，例如仅使用Modal与Toast：import { Modal, Toast } from './js/index.esm.js'；
3、确保构建工具配置支持sideEffects: false，并在package.json中标注"sideEffects": false；
4、检查最终打包产物中是否仍包含Dropdown、Popover等未声明导入却存在于chunk中的类定义。
四、Sass变量与工具类膨胀控制
Bootstrap的utilities.scss默认生成数百个间距、颜色、显示类，若项目仅需mt-3、d-none、text-primary等少数几个，则其余工具类构成典型冗余。
1、复制node_modules/bootstrap/scss/utilities.scss至项目目录custom-utilities.scss；
2、注释掉全部@import "utilities/api"及未使用子模块（如shadow、border-radius、screen-reader）；
3、保留仅需的map定义，例如$spacers: (0: 0, 1: 0.25rem, 3: 1rem)；
4、编译后对比原始utilities.css体积，通常可减少70%以上的工具类输出字节。
五、CDN加载链路中的隐性冗余
通过CDN引入Bootstrap时，浏览器可能因缓存策略或跨域限制重复请求CSS与JS资源，尤其当同时加载Bootstrap CSS、JS及第三方图标字体时，HTTP请求数激增，RTT叠加导致感知延迟。
1、确认是否同时加载了bootstrap.min.css与bootstrap-icons.css，后者gzip后仍达110KB；
2、禁用bootstrap-icons，改用SVG内联或系统字体图标替代；
3、将CSS内联至HTML
中（适用于首屏关键样式），JS延迟至DOMContentLoaded后加载；4、检查Network面板中是否存在同一版本Bootstrap被多个script标签重复请求的情况。
