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相关推荐
从零到平台：用 NextAuth 和 Casdoor 打造你自己的 GitHub 级登录系统
00:00 | 2次许多开发者对现代认证的复杂性感到困惑：为什么不直接在用户表里加个密码字段？本文将为你揭开迷雾，从理解...
Linux `cp` 命令终极指南：告别复制文件时的常见陷阱
00:00 | 13次本文深入解析了 Linux 中最常用的命令之一 `cp`。无论你是要复制单个文件、整个目录，还是想保...
精选Bootstrap图标，点亮你的Wiki知识库
00:00 | 33次在构建Wiki或知识库网站时，选择合适的图标至关重要。本文为您精心挑选了一系列适用于知识、文档、分类...
Sitemap URL中的中文需要编码吗？终极指南
00:00 | 37次在为网站（如 wiki.lib00.com）生成 sitemap.xml 时，经常会遇到包含中文字符...