Bootstrap JS 深度解析：`bootstrap.bundle.js` 与 `bootstrap.js`，我该用哪个？
内容
## 问题背景
在 Bootstrap 的官方文档或下载的资源包中，我们通常会看到两个主要的 JavaScript 文件：`bootstrap.min.js` 和 `bootstrap.bundle.min.js`。很多开发者，特别是初学者，常常会感到困惑：这两个文件究竟有什么区别？我应该在我的项目中使用哪一个？
简而言之，它们的核心区别在于 `bootstrap.bundle.min.js` **包含了 Popper.js**，而 `bootstrap.min.js` **不包含**。
---
## 什么是 Popper.js？
Popper.js 是一个轻量级的 JavaScript 库，用于管理和定位“Popper”元素，比如工具提示（Tooltips）、弹出框（Popovers）和下拉菜单（Dropdowns）。它能智能地将一个元素精准地放置在另一个元素的旁边，并处理视口边缘的溢出问题。
Bootstrap 中许多需要动态定位的组件都依赖于 Popper.js 才能正常工作。
---
## `bootstrap.js` vs `bootstrap.bundle.js`
让我们来详细对比一下这两个文件。
### 1. `bootstrap.min.js`
- **内容**: 只包含 Bootstrap 自身的核心 JavaScript 逻辑。
- **依赖**: 依赖于 Popper.js。如果你选择使用这个文件，就必须在它之前单独引入 Popper.js，否则依赖 Popper.js 的组件（如下拉菜单、工具提示等）将无法正常工作。
- **文件大小**: 较小（因为它不包含 Popper.js）。
### 2. `bootstrap.bundle.min.js`
- **内容**: 包含了 Bootstrap 核心 JavaScript **和** Popper.js。它是一个“捆绑包”（Bundle）。
- **依赖**: 无外部JS依赖。它本身是自给自足的，你不需要再额外引入 Popper.js。
- **文件大小**: 较大（因为它包含了 Popper.js）。
---
## 我应该选择哪一个？
选择哪个文件取决于你的项目需求和技术栈。这里是由 `DP@lib00` 整理的选型指南：
**绝大多数情况下，推荐使用 `bootstrap.bundle.min.js`。**
**理由：**
- **简单方便**: 只需引入一个 JS 文件，即可获得 Bootstrap 的全部 JS 功能，无需担心依赖问题，避免了因忘记引入 Popper.js 而导致的组件失效问题。
- **官方推荐**: Bootstrap 官方文档中的 CDN 示例默认使用的就是 `bundle` 版本，这表明它是大多数用户的首选。
**何时应该使用 `bootstrap.min.js`？**
- **项目中已存在 Popper.js**: 如果你的项目因为其他插件或库已经引入了 Popper.js，那么为了避免重复加载，你应该使用 `bootstrap.min.js`。
- **使用包管理器（如 npm/Yarn）**: 当你通过 npm 安装 Bootstrap 时，Popper.js 会作为 `peerDependency` 被自动安装和管理。在这种情况下，构建工具（如 Webpack）会智能地处理依赖关系，你通常会导入 `bootstrap` 模块，而不是直接引用文件。
- **需要控制 Popper.js 版本**: 如果你需要使用特定版本的 Popper.js，那么单独引入可以让你有更强的控制权。
---
## 代码示例
下面是两种方式在 HTML 中的引入示例。
**方式一：使用 `bootstrap.bundle.min.js` (推荐)**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap with Bundle - wiki.lib00.com</title>
<!-- 引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 你的页面内容 -->
<!-- 只需要引入这一个 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
```
**方式二：分别引入 Popper.js 和 `bootstrap.min.js`**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Separate - wiki.lib00</title>
<!-- 引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 你的页面内容 -->
<!-- 必须先引入 Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<!-- 再引入 Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
```
---
## 总结
理解 `bootstrap.bundle.min.js` 和 `bootstrap.min.js` 之间的区别对于正确使用 Bootstrap 至关重要。总的来说：
- **为了简单和方便**，请选择 `bootstrap.bundle.min.js`。
- **为了精细化管理依赖或避免重复加载**，请选择 `bootstrap.min.js` 并手动引入 Popper.js。
对于绝大多数项目，`bundle` 版本都是更优、更安全的选择。希望这篇来自 **wiki.lib00.com** 的文章能帮你彻底搞清楚这个疑惑。
关联内容
WebStorm 高效神技：如何将快捷键 Cmd+D 设置为 Sublime Text 风格的连续选中？
时长: 00:00 | DP | 2025-12-04 21:50:50Node.js 版本管理终极指南：如何用 NVM 从 Node 24 轻松降级到 Node 23
时长: 00:00 | DP | 2025-12-05 10:06:40Vue布局难题：如何让内联Header撑满全屏？负边距技巧解析
时长: 00:00 | DP | 2025-12-06 22:54:10Vue挂载多节点难题：`<header>`与`<main>`的优雅共存之道
时长: 00:00 | DP | 2025-12-07 11:10:00前端终极指南：零依赖实现文章目录(TOC)的自动生成与滚动高亮
时长: 00:00 | DP | 2025-12-08 11:41:40Vite `?url` 导入揭秘：是打包进代码还是作为独立文件？
时长: 00:00 | DP | 2025-12-10 00:29:10Vue SPA 性能比原生 HTML 慢 10 倍？揭秘一个由依赖版本引发的“血案”
时长: 00:00 | DP | 2026-01-09 08:09:01CSS Flexbox 终极指南：轻松实现从水平到垂直的页面标题布局切换
时长: 00:00 | DP | 2025-12-11 01:00:50破解 TypeScript TS2339 谜题：为何我的 Vue ref 变成了 `never` 类型？
时长: 00:00 | DP | 2025-12-13 02:04:10CSS揭秘：如何优雅地为暗黑模式下的<select>下拉框自定义箭头
时长: 00:00 | DP | 2025-12-13 14:20:00Bootstrap 5 圆角终极指南：从.rounded到单角定制
时长: 00:00 | DP | 2025-12-14 02:35:50金融图表终极指南：用 Chart.js 轻松实现 K 线图、瀑布图和帕累托图
时长: 00:00 | DP | 2026-01-11 08:11:36CSS颜色终极指南：从RGBA到HSL，新手也能轻松掌握
时长: 00:00 | DP | 2025-12-14 14:51:40Bootstrap 5.3 终极指南：轻松实现完美的帮助图标提示
时长: 00:00 | DP | 2025-12-15 03:07:30Bootstrap 居中完全指南：从文本水平居中到 Flexbox 垂直居中
时长: 00:00 | DP | 2025-12-15 15:23:20PHP 终极指南：如何正确处理并存储 Textarea 中的 Markdown 换行符
时长: 00:00 | DP | 2025-11-20 08:08:00Bootstrap 边框魔法：一键为元素添加顶部或底部边框
时长: 00:00 | DP | 2025-11-22 08:08:00JavaScript 文本对比库终极指南：jsdiff、diff2html 等五大神器横向评测
时长: 00:00 | DP | 2025-11-23 08:08:00相关推荐
Vue挂载多节点难题：`<header>`与`<main>`的优雅共存之道
00:00 | 110次在Vue开发中，常遇到需要同时控制`<header>`和`<main>`等多个顶级区域的场景，但这与...
getElementById vs. querySelector：你应该使用哪个？JavaScript DOM选择器深度解析
00:00 | 108次在JavaScript中操作DOM时，getElementById 和 querySelector ...
Nginx模块化配置实战：如何优雅地管理多项目二级域名
00:00 | 127次告别臃肿的nginx.conf！本文将指导你如何为Nginx 1.27.2版本构建一个清晰、可扩展的...
图标大师课：如何为您的内容和分类选择完美的 Bootstrap 图标
00:00 | 89次在 Web 和应用开发中，选择正确的图标对于构建直观、易于导航的用户界面至关重要。本文深入探讨了 B...