具有多个包的Browserify的效率

Question

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

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

例如,让我们说你的bundle.js包含lib1, lib2, lib3, customLib.

1. 如果您的网络应用程序的一部分只需要lib1客户端仍然必须下载巨大的bundle.js,它最终不使用75%的.已下载浪费的字节.不必要地增加了页面加载时间.
2. 如果您customLib是经常迭代的代码,那么每次更改时,您的客户都必须重新下载bundle.js,再次下载大量未更改的第三方库...

您的网络应用程序的其他部分可能会使用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){...});