为什么以及在哪里需要 bundle.js？

Question

Node.js/Angular/React 应用程序对 bundle.js 的需求是什么？如果在构建和部署应用程序时不使用它怎么办？

Answer 1

捆绑从何而来？

出于性能原因，我们开始捆绑资产。

• HTTP1 支持单个连接上的有限请求。为每个资产创建连接会影响性能。
• 我们开始逐页捆绑内容，以通过更有效的缓存来提高性能。
• 我们能够将指纹添加到其中并将其上传到 CDN。 （主页.231434.js）。因此，我们能够通过 docker 化来部署我们的应用程序。
• 捆绑还有助于我们进一步减小页面大小，因为捆绑器了解整个系统。这意味着它可以删除未使用的内容并更轻松地缩小内容。如果没有捆绑器，您将无法轻松做到这一点。
• 此外，捆绑器正在使用转译器。浏览器并不总是能够运行我们编写的代码，例如 Typescript、CoffeeScript。捆绑器可以轻松地将这些代码转换成捆绑包。

我们还需要它吗？

如今情况发生了很大变化，就像我们捆绑资产一样。

• 首先，现在几乎所有浏览器都支持 HTTP/2。所以我们可以在同一个连接上请求多个文件。因此不再需要捆绑。此外，我们还有 http/2 服务器推送。
• React、Angular、Vue 等库的大小要有效得多。它们可以很容易地从 gzip 支持源下载到页面。

这些是我们不再需要捆绑的原因。

但根据您的项目，我们可能仍需要捆绑。这是真的。

我还是会选择捆绑。

---

在我的公司，我们使用容器编排系统来控制我们的 dockerized 应用程序。我们可能同时运行多个版本。在打包上传到 CDN 的同时为文件创建指纹对我们来说仍然更有效。我们也在尝试使用prefetching 和preloading。 CDN 帮助我们减少其他国家访问者的加载时间。 此外，我们还从服务人员那里获得支持，以便在我们需要时逐页更改资产。

所以实际上现在它只是基于你的项目。没有太多性能原因了。

Answer 2

如何创建 bundle.js

现在，我们通常使用 webpack 之类的打包工具来打包 js、css 或其他文件。通过适当的加载器，webpack 会将文件打包成许多 bundle 文件，浏览器会理解它们。

对 bundle.js 的需求

1. 模块打包器会分析项目，找到依赖关系，只在加载网页时获取必要的包。
2. 并且通过module bundler，它会编译一些浏览器无法读取的语言，如typescript、less等。

如果不使用怎么办

Web项目不需要Module bundler，但它会提高网页的性能。如果不使用Module bundler，web在加载时不能只获取必要的bundle，所以加载时间会更长。