javascript - Efficiency of Browserify with multiple bundles - Stack Overflow

admin管理员组

文章数量:1399770

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

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

• javascript
• browserify
• dynamic-script-loading

Share Improve this question Follow asked Jan 3, 2015 at 1:17 Jake WilsonJake Wilson 91.3k9797 gold badges260260 silver badges371371 bronze badges 4

• github./substack/browserify-handbook#partitioning – Yury Tarabanko Commented Jan 3, 2015 at 1:25
• Hmmm that is what I was looking for I think. Does that allow you to keep all libraries in individual (or optionally bining certain ones) files and still load them dynamically? – Jake Wilson Commented Jan 3, 2015 at 1:32
• I think so. Check this module npmjs./package/partition-bundle I haven't used it yet (but I'm planning too). – Yury Tarabanko Commented Jan 3, 2015 at 2:08
• Yeah that looks really good actually. Feel free to submit your answer as an actual answer and I will accept it. – Jake Wilson Commented Jan 3, 2015 at 2:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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 mon 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/mon.js"></script>
<script src="/bundle/x.js"></script>

Partition bundle with async loading fallback

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

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/mon.js

本文标签： javascriptEfficiency of Browserify with multiple bundlesStack Overflow