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