如何仅导入Bootstrap的Navbar、Dropdown、Collapse等JavaScript组件？

假设你用的是Bootstrap 5+（目前最常用的稳定版本），且项目基于Webpack、Vite这类模块化打包工具，直接按下面的步骤来就行：

1. 精准导入所需组件的JS模块 #

Bootstrap的每个JS组件都是独立的ES模块，不用导入完整包，只挑你需要的：

• 先导入几个核心工具类（Navbar、Dropdown、Collapse都依赖这些）：

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dom/event-handler';
import 'bootstrap/js/dist/dom/manipulator';

• 再导入目标组件的JS：

// 导航栏组件
import 'bootstrap/js/dist/navbar';
// 下拉菜单
import 'bootstrap/js/dist/dropdown';
// 折叠面板/菜单
import 'bootstrap/js/dist/collapse';

2. 处理Dropdown的依赖 #

Dropdown组件必须依赖Popper.js，先安装：

npm install @popperjs/core --save

不用手动全局引入，打包工具会自动处理依赖关联，只要你装了就能用。

3. 别碰完整的Bootstrap JS包 #

绝对不要写import 'bootstrap'或者引入完整的bootstrap.js脚本，只保留上面那些按需导入的模块，不然体积又回去了。

4. 测试功能 #

按Bootstrap的标准HTML结构写Navbar、Dropdown、Collapse的代码，测试下交互：比如折叠菜单能不能展开、下拉菜单能不能触发，没问题就搞定了。

额外优化点 #

• 确保你的打包工具（Vite/Webpack）开了tree-shaking，它会自动删掉没用到的代码，进一步压缩体积。
• 不确定某个组件需要哪些依赖的话，去Bootstrap组件文档里看每个组件的依赖说明，精准导入不冗余。

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