srcgraph code splits ES6 modules. It accepts multiple JS module entrypoints, and returns the minimum number of modules required to represent the source graph.
srcgraph includes a Gulp plugin which generates said modules.
It can also be run to generate loosely-coupled script tags that do not use
On the left, we have an abstract dependency graph.
entry1.js looks like—
A.js imports C, and D etc.
The right side is the output of srcgraph.
srcgraph walks the dependency graph, marking each node with the entry points that use it. Nodes that are used by only one entry point are merged into their module.
However, the remaining nodes (D, E and F) can't be naïvely bundled into a big bag. Because D and E have unique ways in which they are used, we turn them into individual modules so that the entry points of D and E are still exposed. Conceptaully we've just made the D and E modules 'bigger' (well, D remains the same size). They still export the same entry points.
If we performed symbol renaming (i.e. so that
entry1.js can safely import D and E, because the names 'could not collide'), it'd be possible to merge the two D and E modules together.
This is, however, a simple approach that scales to any number of entry points.
To determine the minimum number of modules needed for a complex dependency graph, include and use
(You can check out the code and run this yourself!)
const graph = ;;
These modules can be used as arguments to Rollup. Generate a matching number of modules that include only those src files, and assume all other dependencies are external.
The Gulp plugin, provided in
plugin.js (or as
require('srcgraph').gulp, if you're using this via a package manager), invokes the graph algorithm as well as running Rollup.
const gulp = ;const srcgraph = gulp;gulp;
This will write out the minimum number of modules needed inside
If you specify the format as IIFE, then the same file will be generated, but they will simply create global
You'll be responsible for including the files in the right order (unlike ES6 modules, which have import/export statements), but you'll see the same split.
const options = format: 'iife';return gulp; // generates code without import and export
This is available under an Apache2 license.