React Bootstrap中Bootstrap类重复的性能影响及解决方法

该问题确实会对应用性能产生负面影响，具体影响体现在两个维度：

• 资源加载层面：重复的样式规则会平白增加打包后CSS产物的体积，拉长首屏资源加载耗时，弱网环境下的影响会被进一步放大。
• 渲染运行层面：浏览器渲染页面时需要遍历所有匹配的CSS规则完成优先级计算、样式合并，重复的同权重类规则会增加样式重算阶段的CPU开销，在低性能设备、长列表等DOM节点量级较大的场景中，可能引发交互卡顿、滚动掉帧的问题。

出现这个问题基本都是Bootstrap样式被重复引入打包导致的：自定义主题过程中如果同时存在全局全量引入编译版Bootstrap CSS、SCSS文件重复导入Bootstrap核心模块、按需加载插件重复注入组件样式这几类情况，同一份CSS规则就会被多次打包进最终产物，在Chrome检查器中就表现为同一个类重复出现、规则反复覆盖。

• 清理重复的全局引入
  检查项目入口文件（通常为index.js/App.js），如果已经通过SCSS方式引入自定义编译的Bootstrap主题，直接删除文件中直接引入bootstrap/dist/css/bootstrap.min.css这类预编译CSS的代码，保证Bootstrap基础样式不会被重复全量加载。
• 规范SCSS主题文件的编写逻辑
  主题SCSS文件必须严格按顺序编写，且Bootstrap核心样式仅全局引入一次，禁止在业务组件的SCSS中重复导入Bootstrap核心模块：

  // 第一步：先定义需要覆盖的Bootstrap原生变量
  $theme-colors: (
    "primary": #1677ff,
    // 其他自定义主题色
  );
  $border-radius: 6px;
  // 其余自定义变量...
  
  // 第二步：仅在这里全局引入一次Bootstrap核心SCSS
  @import "~bootstrap/scss/bootstrap";
  
  // 第三步：编写项目全局自定义样式
  

• 排查按需加载配置冲突
  如果项目中配置了babel-plugin-import等实现组件CSS按需加载的插件，在已经全局引入自定义编译Bootstrap样式的前提下，关闭react-bootstrap对应的CSS按需加载规则，避免插件自动为每个组件重复注入原生Bootstrap样式。
• 结果验证
  完成上述调整后重新启动项目/执行生产构建，打开Chrome检查器查看元素样式，确认.btn这类基础Bootstrap类仅存在一份规则即可，同时可对比构建后的CSS产物体积，确认冗余代码已被清理。

参考现象截图：
问题参考截图

内容的提问来源于stack exchange，提问作者Ali Raza