具有多个包的Browserify的效率

Question

我是Browserify的新手，我正在努力弄清楚如何使客户端需要下载的效率更高。

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

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

1. 如果您的Web应用程序的一部分只需要lib1则客户端仍然必须下载一个庞大的bundle.js ，并且最终不会使用75％的。 已下载浪费的字节。 不必要地增加了页面加载时间。
2. 如果你的customLib是经常迭代的一段代码，那么每次更改时，你的客户都必须重新下载bundle.js ，再次下载大量没有改变的第三方库...

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

我已经看到了将捆绑包分成多个捆绑包的建议。 但到底是什么？ 如果一个页面使用lib1 ，另一个页面使用lib1和lib2 ，另一个页面使用lib2和lib3 ，那么如何将其拆分？ 你把它分成多个捆绑包的次数越多，你是不是已经摆脱了bundle.js的优势？

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

Answer 1

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

手册的分区部分描述了以下两种技术

1. factor-bundle因子2个或多个入口点将公共依赖项放入单个bundle中。

2. partition-bundle与factor -bundle相同，但使用async loadjs函数进行运行时加载。

因子束

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

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

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

Answer 2

Substack刚刚发表了这篇关于如何拆分捆绑的要点 。 他建议使用像这样的因子包 ：

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