Introduction
Welcome 🙌​
@rx-angular/rebundle is a set of tools that optimize the build output of
Angular applications using esbuild. It hooks into the build as an esbuild
plugin, understands the generated module graph, and rebundles chunks in memory
before they are written to disk — no re-transpilation, and no changes to your
source code for the default setup.
Why?​
Problem statement​
The Angular CLI's migration from Webpack to
esbuild brought massive build-time performance
improvements, but it can cause
runtime performance degradations on large projects.
The root cause is the
esbuild code-splitting algorithm,
which focuses on minimizing the amount of code required by any entry point of
the application. However, it does not consider entry-point hierarchy or
application-specific aspects, resulting in excessive initial chunks (often 100+
small files) that cause network thrashing, known as The Chunk Gap.
To address some of these issues, the Angular team added the experimental chunk optimizer, which rebundles the application to reduce the number of chunks. However, this solution is limited and cannot be extended with custom configurations.
For a deeper understanding of this issue, read the architecture and problem statement.
Solution​
@rx-angular/rebundle allows users to optimize the bundle output of Angular
applications beyond the Angular experimental chunk optimizer. By default it
provides reachability-based optimization that most apps can benefit from, while
remaining fully configurable for complex scenarios.
Impact​
By employing advanced chunking strategies, @rx-angular/rebundle consolidates
initial and dynamic chunks based on the dependency graph. This leads to
significantly fewer HTTP requests, mitigating network thrashing and restoring
fast Largest Contentful Paint (LCP) in HTTP/2 environments.
For real-world impact data, see this demo discussion.
How?​
The optimizer acts as an esbuild plugin. It hooks into the build process, reads the metafile output to understand the generated module graph, and intelligently rebundles chunks in memory before they are written to disk. The policy layer that decides how chunks are grouped is the merge strategy system.
What's next?​
- Overview: features, benefits, and where to go next.
- Set up rebundle: wire the plugin into an Angular CLI or Nx build.
- Architecture & problem statement: the mechanism in depth.