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...

Ethbinium

github.com/substack/browserify-handbook#partitioning – Albigenses

Hmmm that is what I was looking for I think. Does that allow you to keep all libraries in individual (or optionally combining certain ones) files and still load them dynamically? – Ethbinium

I think so. Check this module npmjs.com/package/partition-bundle I haven't used it yet (but I'm planning too). – Albigenses

Yeah that looks really good actually. Feel free to submit your answer as an actual answer and I will accept it. – Ethbinium

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){...});

Albigenses

Do you have to use a closure to load the module? Can you not use it outside the closure? – Ethbinium

I doubt that. You have to somehow make sure the module was loaded. loadjs makes request on the first call and caches the result. So there is no overhead on subsequent calls. Kinda AMDish way of doing things. – Albigenses

@YuryTarabanko. I am trying loading files with partition bundle. Here's my situation: Module 'a' is in /js/bundle-user.js and this js file is in public folder accessible at /js/ The page is hosted at localhost:8888/settings. I am trying loadjs('./a') in this file but it tries to load bundle-user.js from localhost:8888/bundle-user.js instead from localhost:8888/js/bundle-user.js Any idea how to solve this.? – Wiersma

Answer 2

Substack just published this gist explaining how to split bundles. He suggests to use factor-bundle like this:

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

Thoreau