Skip to content

Instantly share code, notes, and snippets.

@caridy

caridy/README.md Secret

Last active August 29, 2015 14:05
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save caridy/a11d3cbaa1b90a440661 to your computer and use it in GitHub Desktop.
Save caridy/a11d3cbaa1b90a440661 to your computer and use it in GitHub Desktop.
what is partial bundling?

Partial Bundling

Since ES modules are statically verifiables, we should be able to analyze each module individually, its dependencies and its dependants, to optimize the source code based on the conections between the nodes in the graph.

In the following example, we have 2 modules, and we could analyze them, and determine whether or not a.js and b.js are ever going to be used by other modules, and shrink that part of the dependency tree into something like this:

a.js

var a = 1;
var b = 2;

export default function () {
   return a + b;
}

d.js

export default function () {
    return 3;
}

which means that your app will actually rely on 2 modules rather than 4.

Why?

  • it reduces the amount of computations done by browsers (remember the panalties for using too many granular modules in YUI)
  • it reduces the amount of requests, and the time to request (remember the penalties for using YUI gallery modules, this is equivalent)
  • it reduces the size of the internal maps maintaned by loader
  • it reduces the amount of promieses and other async processed used during the dispatching process in loader
export var a = 1;
export var b = 2;
import {a} from "a";
import {b} from "b";
export default function () {
return a + b;
}
export default function () {
return 3;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment