Bundle Graph

[drkibitz]

I've seen the dependency graph, but I was wondering if it is possible to do something like the following example.

• In my final project, I will have the need for 3 entry points scripts.
• I can specify multiple entry points, and will be given the shared runtime scripts needed, or they can be automatically generated.

Something like this (Please understand this is to just to demonstrate the concept):

$ browserify --bundle-graph-list -e main.js -e worker1.js -e worker2.js

Runtime Entry Points:
main.js
├─ uniquefoo.js
├─ uniquemoduledep1.js
worker1.js
├─ uniquefoo.js
├─ uniquebar.js
│ ├─ uniquebaz.js
├─ uniquemoduledep2.js
worker2.js
├─ uniquebaz.js
├─ uniquemoduledep3.js

Recommended Common Runtime Bundles:
shared/bundle1.js
├─ uniquefoo.js
shared/bundle2.js
├─ uniquebar.js
│ ├─ uniquebaz.js

Maybe something to show the recommended command(s):

$ browserify --bundle-graph-cmd -e main.js -e worker1.js -e worker2.js

browserify -r uniquefoo.js > static/shared/bundle1.js
browserify -r uniquebaz.js -r uniquebar.js > static/shared/bundle2.js
browserify -x uniquefoo.js main.js > static/main.js
browserify -x uniquefoo.js -x uniquebar.js -x uniquebaz.js worker1.js > static/worker1.js
browserify -x uniquebar.js -x uniquebaz.js worker2.js > static/worker2.js

Or maybe just do it:

$ browserify --bundle-graph-build -e main.js -e worker1.js -e worker2.js

Created 5 bundles, 3 entries, 2 shared

Final build would look like:

• static/main.js -> bundled: src/uniquemoduledep1.js
• static/worker1.js -> bundled: src/uniquemoduledep2.js
• static/worker2.js -> bundled: src/uniquemoduledep3.js
• static/shared/bundle1.js -> bundled: src/uniquefoo.js
• static/shared/bundle2.js -> bundled: src/uniquebar.js, src/uniquebaz.js

index.html:

<script src="shared/bundle1.js"></script>
<script src="shared/bundle2.js"></script>
<script src="main.js"></script>

worker1.js:

importScripts('shared/bundle1.js');
importScripts('shared/bundle2.js');

worker2.js:

importScripts('shared/bundle2.js');

The idea is to have something that understands multiple application runtime entry points, that can give you the recommended commonly shared scripts among them that need to be bundled. The previous example may be a bad one, but I hope you can understand what I'm trying to explain.

If something like this is already possible, would love to see an example!

Thanks.

[drkibitz]

Update: I changed the example(s) in this issue to hopefully be more clear.

[sveisvei]

+1 either alone or built in.

[hughsk]

@drkibitz is there any reason that, in your case, you can't use webworkify to inline the webworkers into main.js? Takes care of duplication issues, and seems a lot simpler :)

[drkibitz]

@hughsk Thanks for the pointer, have not heard of webworkify, but the fact that I use web workers in my example is arbitrary. I was just trying to make the example as real as I could, and thought web workers could demonstrate that well enough.

[drkibitz]

The example could be three different html files, with three different js entry points, and it's the same example.
e.g.

• index.html + main.js
• profile.html + profile/main.js
• search.html + search/main.js

[ghost]

You can now do this with factor-bundle:

factor-bundle x.js -o bundle/x.js y.js -o bundle/y.js z.js -o bundle/z.js > bundle/common.js

Each entry point has a corresponding output bundle and any modules used by more than 1 entry file (adjustable with --threshold) end up in common.js.

I'm closing this issue because this can feature can be done with third-party modules but perhaps in the future core can support this feature natively once we have a good feeling for the solution space.