Efficiency of Browserify with multiple bundles

Question

I'm new to Browserify and I'm trying to figure out how to make it more efficient with regards to how much the client needs to download.

I have a web app, that uses many different 3rd party libraries and custom code. With Browserify, it seems like the general approach people suggest is to wrap everything up into one big bundle.js. This seems horribly inefficient to me for several reasons:

For example, lets say your bundle.js contains lib1, lib2, lib3, customLib.

1. If a part of your web app only needs lib1 the client still has to download a huge bundle.js and it ends up not using 75% of it. Wasted bytes downloaded. Unnecessarily increased page load time.
2. If your customLib is a piece of code that you iterate upon often, then every time it changes, your clients have to redownload bundle.js, again downloading a ton of 3rd party libraries that haven't changed...

Other parts of your web app may use lib2 and lib3 but the client may or may not ever go to there, in which he definitely wasted bandwidth downloading the entire bundle.js.

I've seen suggestions to split up your bundle into multiple bundles. But to what end? If one page uses lib1, another page uses lib1 and lib2 and another page uses lib2 and lib3, then how do you split it up? The more you split it up into multiple bundles aren't you getting away from the advantages of bundle.js?

Browserify seems to be highly regarded so I hope that I am just missing something here. What is the proper approach to bundling together many libraries and custom scripts together? People call Browserify a "script loader" but every script loader I've seen in the past (like yepnope etc), use logic to determine which scripts to download, which seems like a much more efficient solution, while Browserify appears to want the client to download everything...

Answer 1

Not sure if the answer fits SO format well. But nevertheless...

Partitioning Section of handbook describes 2 following techniques

1. factor-bundle factors 2 or more entry points placing common dependencies into a single bundle.

2. partition-bundle same as factor-bundle but with runtime loading using async loadjs function.

Factor bundle

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

Partition bundle with async loading fallback

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