From imports to a graph
A bundler starts at an entry point and follows every import statement, building a module graph of which file depends on which. Each module is a node, each import an edge. From this graph it produces a small number of optimized files the browser can load.
- It resolves import paths to actual files on disk.
- It transforms each module, then concatenates them.
- It rewrites imports into references within the bundle.
Why a graph helps
The graph enables powerful optimizations. Tree shaking drops modules and exports nothing imports, shrinking output. Code splitting carves the graph at dynamic import boundaries so the browser loads only what a route needs.
- Tree shaking: remove unreachable code based on static imports.
- Code splitting: emit separate chunks loaded on demand.
- Deduplication: share a module used by many parts once.
By understanding the graph you can reason about why a file ended up in a chunk, why a heavy library bloated the bundle, and where a dynamic import would cut initial load. The output is fewer, smaller requests than shipping every source file raw.
Key idea
A bundler walks imports from an entry into a module graph, then tree shakes and splits it into optimized chunks.