使用多个捆绑包时 Browserify 的效率

Question

我刚接触Browserify，正试图找出如何使其在客户端需要下载的内容方面更加高效。

我的Web应用程序使用了许多不同的第三方库和自定义代码。使用Browserify似乎是将所有内容打包成一个大的bundle.js文件的普遍做法。对我来说，这种方法非常低效，原因有几个：

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

1. 如果Web应用程序的某个部分仅需要lib1 ，客户端仍然必须下载一个巨大的bundle.js，最终只使用其中的25%。浪费下载的字节数，增加页面加载时间。
2. 如果customLib是您经常迭代的一块代码，则每次更改时，您的客户端都必须重新下载bundle.js，再次下载大量未更改的第三方库...

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

我看到有人建议将捆绑包分成多个部分。但是有什么意义呢？如果一个页面使用lib1，另一个页面使用lib1和lib2，还有另一个页面使用lib2和lib3，那么如何拆分它们呢？你将其分成多个部分，是否会偏离bundle.js的优势?

Browserify似乎备受推崇，所以我希望我只是没有理解其中的问题。一起打包许多库和自定义脚本的正确方法是什么？人们称Browserify为“脚本加载器”，但我以前见过的所有脚本加载器（例如yepnope等）都使用逻辑来确定要下载哪些脚本，这似乎是更有效的解决方案，而Browserify似乎希望客户端下载所有内容...

- Jake Wilson

---

https://github.com/substack/browserify-handbook#partitioning - Yury Tarabanko

嗯，我想那就是我在寻找的。这是否允许您将所有库保存在单独的文件中（或选择组合某些文件），并仍然动态加载它们？ - Jake Wilson

我认为是这样的。检查一下这个模块 https://www.npmjs.com/package/partition-bundle 我还没有使用过它（但我计划使用）。 - Yury Tarabanko

是的，那看起来真的很不错。请随意将您的答案提交为实际答案，我会接受它。 - Jake Wilson

Answer 1

我不确定答案是否适合SO的格式。但无论如何，手册的分区部分描述了以下两种技术：

1. factor-bundle因式分解2个或多个入口点，并将公共依赖项放置到单个捆绑包中。

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

Factor bundle

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

使用异步加载回退分区捆绑

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

- Yury Tarabanko

---

你必须使用闭包来加载模块吗？你不能在闭包外部使用它吗？ - Jake Wilson

我有所怀疑。你必须确保模块已被加载。loadjs 在第一次调用时发出请求并缓存结果。因此，后续调用没有额外开销。这是一种类似 AMD 的做法。 - Yury Tarabanko

@YuryTarabanko。我正在尝试使用分区包加载文件。这是我的情况： 模块'a'在/js/bundle-user.js中，而此js文件位于public文件夹中，可通过/js/访问。 该页面托管在http://localhost:8888/settings。 我正在尝试在此文件中loadjs('./a')，但它尝试从http://localhost:8888/bundle-user.js而不是从http://localhost:8888/js/bundle-user.js加载bundle-user.js 有什么想法如何解决这个问题吗？ - Dhawal

Answer 2

Substack刚刚发布了这个要点，解释了如何拆分包。他建议像这样使用factor-bundle：

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

- mantoni