Browserify 与多个包的效率

Question

我是 Browserify 的新手，我正在尝试弄清楚如何在客户端需要下载多少方面提高效率。

我有一个网络应用程序，它使用许多不同的第 3 方库和自定义代码。使用 Browserify，人们建议的一般方法似乎是将所有内容打包成一个大 bundle.js。由于以下几个原因，这对我来说似乎非常低效：

例如，假设您的 bundle.js 包含 lib1, lib2, lib3, customLib.

如果您的 Web 应用程序的一部分只需要 lib1，客户端仍然需要下载一个巨大的 bundle.js，并且它最终没有使用其中的 75%。浪费字节下载。不必要地增加了页面加载时间。
如果您的 customLib 是您经常迭代的一段代码，那么每次它发生变化时，您的客户都必须重新下载 bundle.js，再次下载大量没有的第 3 方库'改变...

您网络应用程序的其他部分可能会使用 lib2 和 lib3，但客户可能会也可能不会去那里，他肯定会浪费带宽下载整个 bundle.js .

我看到了将您的捆绑包分成多个捆绑包的建议。但是为了什么目的呢？如果一个页面使用lib1，另一个页面使用lib1和lib2，另一个页面使用lib2和lib3，那么如何拆分呢？你把它分成多个包的次数越多，你是不是就失去了 bundle.js 的优势？

Browserify 似乎受到高度重视，所以我希望我只是在这里遗漏了一些东西。将许多库和自定义脚本捆绑在一起的正确方法是什么？人们称 Browserify 为 "script loader" 但我过去见过的每个脚本加载器（如 yepnope 等）都使用逻辑来确定要下载哪些脚本，这似乎是一个更有效的解决方案，而 Browserify似乎希望客户端下载所有内容...

Answer 1

不确定答案是否适合 SO 格式。尽管如此...

Partitioning Section 手册描述了以下 2 种技术

factor-bundle 因子 2 个或更多入口点将公共依赖项放入单个包中。
partition-bundle 与 factor-bundle 相同，但使用异步 loadjs 函数进行运行时加载。

因子束

<script src="/bundle/common.js"></script>
<script src="/bundle/x.js"></script>

具有异步加载回退的分区包

loadjs(['./x'], function(x){...});

Answer 2

像这样 published this gist explaining how to split bundles. He suggests to use factor-bundle 子堆栈：

browserify x.js y.js -p [ factor-bundle -o bundle/x.js -o y.js ] \
  -o bundle/common.js

Browserify 与多个包的效率

Efficiency of Browserify with multiple bundles

javascript

dynamic-script-loading

browserify