README.md
February 1, 2025 · View on GitHub
State Management Bundle Size Comparison Angular
Checking the app bundle sizes for different state management solutions with source-map-explorer.
The project is based on https://github.com/DeborahK/Angular-NgRx-GettingStarted.
See the branches for the different setups.
Run npm run build:stats to let source-map-explorer calculate the prod bundle size.
Results
The measured size represents the total size of the app, which is build with production configuration.
Angular 19.1.3
| Library | Version | Size (KB) | Comments | Branch |
|---|---|---|---|---|
| 🚦DIY Signal State Service | - | 374.34 | ng@19.1.3--diy-signal-state-service | |
| DIY RxJS State Service | - | 376.77 | ng@19.1.3--diy-rxjs-state-service | |
| Elf | 2.5.1 | 379.22 | Uses ngneat/effects for effects | ng@19.1.3--elf@2.5.1 |
| 🚦NgRx Signal Store | 19.0.0 | 380.15 | ng@19.1.3--ngrx-signals@19.0.0 | |
| MiniRx Store (Feature Store API) | 6.0.0 | 384.13 | ng@19.1.3--mini-rx-store@6.0.0--feature-store-api | |
| MiniRx Store (Component Store API) | 6.0.0 | 384.37 | ng@19.1.3--mini-rx-store@6.0.0--component-store-api | |
| 🚦MiniRx Signal Store (Feature Store API) | 3.0.0 | 385.38 | ng@19.1.3--mini-rx-signal-store@3.0.0--feature-store-api | |
| 🚦MiniRx Signal Store (Component Store API) | 3.0.0 | 385.64 | ng@19.1.3--mini-rx-signal-store@3.0.0--component-store-api | |
| 🚦MiniRx Signal Store (Redux Store API) | 3.0.0 | 385.69 | Uses ts-action for actions | ng@19.1.3--mini-rx-signal-store@3.0.0--redux-store-api |
| NgRx Component Store | 19.0.0 | 385.64 | ng@19.1.3--ngrx-component-store@19.0.0 | |
| MiniRx Store (Redux Store API) | 6.0.0 | 390.31 | Uses ts-action for actions | ng@19.1.3--mini-rx-store@6.0.0--redux-store-api |
| NgRx Store | 19.0.0 | 408.33 | Uses ngrx/effects for effects | ng@19.1.3--ngrx-store@19.0.0 |
Angular 17.0.3
| Library | Version | Size (KB) | Comments | Branch |
|---|---|---|---|---|
| DIY RxJS State Service | - | 377.05 | ng@17.0.3--diy-rxjs-state-service | |
| 🚦DIY Signal State Service | - | 377.20 | ng@17.0.3--diy-signal-state-service | |
| Elf | 2.4.0 | 379.48 | Uses ngneat/effects for effects | ng@17.0.3--elf@2.4 |
| 🚦NgRx Signal Store | 17.0.1 | 382.83 | ng@17.0.3--ngrx-signals@17.0.1 | |
| MiniRx Store (Component Store API) | 5.1.0 | 382.91 | ng@17.0.3--mini-rx-store@5.1--component-store-api | |
| MiniRx Store (Feature Store API) | 5.1.0 | 383.53 | ng@17.0.3--mini-rx-store@5.1--feature-store-api | |
| 🚦MiniRx Signal Store (Component Store API) | 0.0.24 | 386.08 | ng@17.0.3--mini-rx-signal-store@0.0.21--component-store-api | |
| 🚦MiniRx Signal Store (Feature Store API) | 0.0.24 | 386.66 | ng@17.0.3--mini-rx-signal-store@0.0.21--feature-store-api | |
| 🚦MiniRx Signal Store (Redux Store API) | 0.0.24 | 387.76 | Uses ts-action for actions | ng@17.0.3--mini-rx-signal-store@0.0.21--redux-store-api |
| NgRx Component Store | 17.0.0-rc.0 | 388.93 | ng@17.0.3--ngrx-component-store@17.0.0-rc.0 | |
| MiniRx Store (Redux Store API) | 5.1.0 | 390.55 | Uses ts-action for actions | ng@17.0.3--mini-rx-store@5.1--redux-store-api |
| Akita | 8.0.1 | 401.79 | ng@17.0.3--akita@8.0.1 | |
| NgRx Store | 17.0.0-rc.0 | 408.18 | Uses ngrx/effects for effects | ng@17.0.3--ngrx-store@17.0.0-rc.0 |
Angular 16.1
| Library | Version | Size (KB) | Comments | Branch |
|---|---|---|---|---|
| 🚦DIY Signal State Service | - | 371.98 | ng@16.1--diy-signal-state-service | |
| DIY RxJS State Service | - | 372.08 | ng@16.1--diy-rxjs-state-service | |
| Elf | 2.3.2 | 374.59 | Uses ngneat/effects for effects | ng@16.1--elf@2.3 |
| MiniRx Store (Component Store API) | 5.1.0 | 378.08 | ng@16.1--mini-rx-store@5.1--component-store-api | |
| MiniRx Store (Feature Store API) | 5.1.0 | 378.72 | ng@16.1--mini-rx-store@5.1--feature-store-api | |
| 🚦MiniRx Signal Store (Component Store API) | 0.0.5 | 380.53 | ng@16.1--mini-rx-signal-store@0.0.5--component-store-api | |
| 🚦MiniRx Signal Store (Feature Store API) | 0.0.5 | 380.97 | ng@16.1--mini-rx-signal-store@0.0.5--feature-store-api | |
| 🚦MiniRx Signal Store (Redux Store API) | 0.0.5 | 382.54 | Uses ts-action for actions | ng@16.1--mini-rx-signal-store@0.0.5--redux-store-api |
| NgRx Component Store | 16.1.0 | 383.98 | ng@16.1--ngrx-component-store@16.1 | |
| MiniRx Store (Redux Store API) | 5.1.0 | 385.49 | Uses ts-action for actions | ng@16.1--mini-rx-store@5.1--redux-store-api |
| Akita | 8.0.1 | 396.68 | ng@16.1--akita@8.0 | |
| NgRx Store | 16.1.0 | 402.90 | Uses ngrx/effects for effects | ng@16.1--ngrx-store@16.1 |
Contributing
You are welcome to add your favourite state management library as well!
You can follow these steps:
- Fork and clone the repo
- Create a branch based on master (or based on another branch with a familiar state management lib (e.g. "ng@17.0.3--diy-signal-state-service")
- Specify the Angular version and the state management library (and version) in the branch name: e.g. "ng@17.0.3--ngrx-signals@17.0.0")
- Now refactor to your favourite state management solution (to have equal conditions: try to follow the facade pattern for the state management code, and use something for effects)
- Run
npm run build:statsto check the bundle size - Create the PR
- add the bundle size in the PR description
- target of the PR is this repo and the branch which you initially used as the base for your refactor-branch (e.g. "ng@17.0.3--diy-signal-state-service")
- I will review your PR and add your results to the README on the master branch
- Finally, I will merge your work to another branch which I will create (e.g. "ng@17.0.3--ngrx-signals@17.0.0") and link that branch in the README