【问题标题】：How does bundling improve performance?捆绑如何提高性能？
【发布时间】：2019-04-03 18:15:11
【问题描述】：

我了解捆绑允许从服务器中提取更少的依赖文件。但是，如果该捆绑依赖文件的文件大小与捆绑文件的大小相同。为什么会更快？

我了解了捆绑拆分的概念，但我们不需要在主 html 文件（我理解为用户首先登陆的页面）中指定捆绑吗？

（如果问题表述不当，我很抱歉。我对整个捆绑概念非常困惑，不知道如何使问题更具体。）

【问题讨论】：

标签： webpack bundle browserify

【解决方案1】：

捆绑的好处

缩小

虽然即使代码未捆绑，您也可以缩小代码，但捆绑代码可以进一步缩小，从而加快加载时间。

例如，假设您有两个文件，file1.js 和 file2.js。 file1.js 使用来自 file1.js 的全局函数。

单独缩小文件要求file1 和file2 中的函数名称保持不变，因为缩小器在缩小@987654328 时无法知道file2 中调用的函数（如果它被缩小了） @。

另一方面，捆绑文件并缩小它们允许缩小器重命名函数或变量的每次出现，从而使您的代码更小。

此外，正如@gauraysingh 所说，捆绑器可以删除未使用的代码，例如函数。例如，假设您在应用程序中使用 jQuery。打包代码时，打包器和压缩器可以删除所有未使用的 jQuery 方法，这意味着您将节省大量文件大小。

更少的 HTTP 请求

仅向捆绑代码发出一个 HTTP 请求比发出多个请求更快且使用的数据更少。

【讨论】：

对于捆绑代码的 HTTP 请求使用更少的数据是否是由于捆绑的其他优势（例如缩小）？
@qsi14 部分是因为其他优势，部分是因为更少的 HTTP 请求意味着更少的 HTTP 握手，因此需要更少的时间

【解决方案2】：

如果您的 javascript 应用程序只有一个构建，那么即使在加载第一页时也会加载所有不必要的代码。我们可以利用 js 提供的异步功能并按需加载块（代码拆分生成的模块）。假设如果我的第一页只有一些信息并且我在第二页的某个按钮上显示弹出窗口，那么我不需要与第一页一起调用 pop 的代码，但我可以在将来有条件地加载该弹出包。除此之外，我们的包当然应该被丑化、缩小和压缩。

【讨论】：