What a bundler does
A bundler walks your import graph from an entry point, resolves every module, and combines them into a small number of files browsers can load efficiently. Along the way it transforms code, removes unused exports, and splits output into chunks.
- Builds a dependency graph from imports.
- Applies transforms like compiling TypeScript.
- Produces optimized chunks with shared code factored out.
Sharing code between apps
Module federation lets separate, independently deployed apps load code from each other at runtime. A host app can pull a component from a remote app over the network, without bundling it at build time.
- Each app builds and deploys on its own schedule.
- Shared libraries can be declared once so they are not duplicated.
- This underpins micro frontends, where teams own different parts of one page.
The tradeoff is runtime coupling: a remote that breaks or changes its contract can affect the host.
Key idea
A bundler turns an import graph into optimized chunks, and module federation lets independently deployed apps share those chunks at runtime to enable micro frontends.