当我第一次听到“模块打包工具”这个词时，作为一名前端开发者，我想，“这是什么魔法来着？”😅
我记得试着读关于它们的内容甚至试用过一次，但没有看出它们的作用。
我只知道每篇文章都推荐使用像 Webpack 这样的模块打包器——而配置起来简直让人抓狂 🔥。
后来我才明白，它们是现代前端开发中最关键的部分，你必须懂。
在这篇文章里，我想分享一些关于模块打包器的知识，这些是我希望早些时候知道的。
让我们出发吧！🚀
📚 立即下载我的免费电子书《React 小技巧101》，先人一步。
此处省略了内容
模块打包器是用来做什么的？我们先来看一个例子。
在这篇文章中，我创建了一个名为 demo_bundling_esbuild 的 React 应用（Github code）。
这是一款简单的应用，显示我的名字、年龄以及其他一些个人信息。（不过，我知道有点自我中心😅）
它使用esbuild作为模块打包工具，其结构如下所示。
以下是项目文件结构的示例：
project/
├── src/
│ ├── App.tsx
│ ├── index.tsx
│ ├── data.json
│ ├── utils.ts
│ └── constants.ts
├── index.html
├── build.js
└── package.json全屏模式 退出全屏
开发完成后，我需要打包应用程序，以便得到可以在浏览器中加载的 index.html 文件。
这个应用程序大致是这样的：
-
-
- 或 此处省略
-
但随后发生了一件趣事...
当我打开[网络]面板时，发现没有看到与代码编辑器中相同的文件，这与我的预期不符。
可以看到 index.html 文件，但 App.tsx、index.tsx 和 constants.ts 呢？🤷♀️
实际上我看到一个文件，就是 dist/bundle.js。
当我打开它的时候，如图gif链接所示，我发现App.tsx、index.tsx和utils.ts的代码——但格式却很奇怪，像是被压缩了一样。
所以，发生了什么？
我怎么从 5 个文件 (index.tsx, utils.ts, constants.ts, App.tsx, data.json) 变成了 **1 个文件 (dist/bundle.js）。
这些文件是怎么合并成一个大文件的？
👉 捆绑完成了。
我的模块打包器（esbuild）将所有的.ts和.json文件打包成了一个文件："dist/bundle.js"。
注：您可以在这里找到配置：build.js 哦
总之，
- 模块打包器 是将代码库中的多个文件合并成更少的文件的工具。
这有几个令人惊叹的原因。
为什么捆绑很重要呢？
好处一。它确保这些依赖项以正确的顺序加载
如果你在使用依赖项（比如 npm 包），你大概会这样引入它们。
import { partition } from "lodash-es";
import { v4 as uuidv4 } from 'uuid-es';点击全屏 退出全屏
过去，这些产品在各个浏览器上的表现并不理想。
模块打包器通过确保依赖项能够正确加载来解决这个问题了。
例如，如果 文件 A 依赖于 文件 B ，而 文件 B 又依赖于 文件 C ，打包器会确保在执行之前所有需要的文件都已准备好。
第二项好处。它减少了HTTP请求的次数
没有捆绑，每个文件都得单独加载一次。
浏览器限制了并行网络请求的数量，因此对于大型应用而言，这可能意味着要等几分钟甚至几小时才能下载并解析文件。
打包器减少文件数量（对于小型应用程序来说，通常只有1到2个文件），大大加快了加载速度。
好处第3点。它能帮你优化文件大小
在打包文件前，模块打包工具会应用优化措施，让它们尽可能小。
以下是一些关键的优化：
-
🌴 树摇（Tree-shaking）：即使你导入了一个未使用的包，打包工具也不会将其包含在最终的打包文件中。最终的打包文件只包含实际使用的代码。
- ✂️ 代码压缩：它会去掉不必要的空格和注释，并将变量名缩短，从而使文件变小，更易于传输和存储。
在我们示例应用中，我在 index.tsx 中导入了一个名为 NOT_USED_CONSTANT 的常数，但未使用，因此它不会出现在打包文件 bundle.js 中。
好处 #4. 它实现了动态导入（也就是代码分割）
假设你应用程序的一部分只为特定用户设计（例如，已登录用户的仪表盘）。
你不想一开始就加载所有内容，只想在需要时按需加载相关的代码。
你可以让模块打包工具将某个代码片段单独放到一个文件里，并在需要时才去加载这样的功能。
这样做会加快你的应用速度 🚀，因为要下载的文件少了。
第5个好处。（额外的）它能兼容各种文件格式（例如.ts，.json等）
默认情况下，打包程序处理 JavaScript 文件。
但他们也支持其他格式（如.ts，.json，.jsx等），使用诸如加载器（例如Webpack，Esbuild等）。
没有这个，你需要手动处理它们再打包。
我需要会配置模块打包工具吗？
👉 不行。
除非你特别不走运，否则你通常不需要。
对于这篇帖子中，我让v0.dev帮我设置一下esbuild 😅。
在我的工作中，我从未自己配置过模块打包器——我们出色的基础设施团队负责这些。
如果你没有自己的基础设施团队，你可以考虑以下几种选择：
-
使用这样的工具（如 Vite）可以帮你自动配置打包器。
-
用谷歌搜索一下怎么做，有很多例子。
- 问了 AI（这就是我做的）。
关键在于理解打包器的作用，以免不小心妨碍了它们的工作。
小结
模块捆绑器（esbuild、Rollup、Webpack 等）其实很容易理解。
它们会从许多文件中提取较少的文件。
它们很有用，具体来说：
✅ 确保依赖项按正确的顺序加载，以避免冲突。
✅ 减少所需的 HTTP 请求数量
✅ 优化文件大小，使下载速度更快
✅ 启用代码分割以提高性能
✅ (额外) 支持像 .ts 和 .json 这样的非 JS 文件。
所以，选一个打包器，试试看，看看它实际是怎么工作的。
在接下来的文章里，我会分享减小包的大小的小技巧。
这就圆满结束了 🎉
留下评论哦 📩，继续交流吧。
别忘了发送一个"💖🦄🔥"哦。
如果你在学 React，可以免费下载我的《101 React小技巧》电子书：101 React Tips & Tricks。
如果你喜欢这类文章，加入我的免费邮件列表FrontendJoy（https://frontendjoy.com/）。
🍔 思考的