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.
The measured size represents the total size of the app, which is build with production configuration.
| Library | Version | Size (KB) | Comments | Branch |
|---|---|---|---|---|
| DIY RxJS State Service | - | 377.05 | [email protected] | |
| 🚦DIY Signal State Service | - | 377.20 | [email protected] | |
| Elf | 2.4.0 | 379.48 | Uses ngneat/effects for effects | [email protected]@2.4 |
| 🚦NgRx Signal Store | 17.0.1 | 382.83 | [email protected]@17.0.1 | |
| MiniRx Store (Component Store API) | 5.1.0 | 382.91 | [email protected]@5.1--component-store-api | |
| MiniRx Store (Feature Store API) | 5.1.0 | 383.53 | [email protected]@5.1--feature-store-api | |
| 🚦MiniRx Signal Store (Component Store API) | 0.0.24 | 386.08 | [email protected]@0.0.21--component-store-api | |
| 🚦MiniRx Signal Store (Feature Store API) | 0.0.24 | 386.66 | [email protected]@0.0.21--feature-store-api | |
| 🚦MiniRx Signal Store (Redux Store API) | 0.0.24 | 387.76 | Uses ts-action for actions | [email protected]@0.0.21--redux-store-api |
| NgRx Component Store | 17.0.0-rc.0 | 388.93 | [email protected]@17.0.0-rc.0 | |
| MiniRx Store (Redux Store API) | 5.1.0 | 390.55 | Uses ts-action for actions | [email protected]@5.1--redux-store-api |
| Akita | 8.0.1 | 401.79 | [email protected]@8.0.1 | |
| NgRx Store | 17.0.0-rc.0 | 408.18 | Uses ngrx/effects for effects | [email protected]@17.0.0-rc.0 |
| Library | Version | Size (KB) | Comments | Branch |
|---|---|---|---|---|
| 🚦DIY Signal State Service | - | 371.98 | [email protected] | |
| DIY RxJS State Service | - | 372.08 | [email protected] | |
| Elf | 2.3.2 | 374.59 | Uses ngneat/effects for effects | [email protected]@2.3 |
| MiniRx Store (Component Store API) | 5.1.0 | 378.08 | [email protected]@5.1--component-store-api | |
| MiniRx Store (Feature Store API) | 5.1.0 | 378.72 | [email protected]@5.1--feature-store-api | |
| 🚦MiniRx Signal Store (Component Store API) | 0.0.5 | 380.53 | [email protected]@0.0.5--component-store-api | |
| 🚦MiniRx Signal Store (Feature Store API) | 0.0.5 | 380.97 | [email protected]@0.0.5--feature-store-api | |
| 🚦MiniRx Signal Store (Redux Store API) | 0.0.5 | 382.54 | Uses ts-action for actions | [email protected]@0.0.5--redux-store-api |
| NgRx Component Store | 16.1.0 | 383.98 | [email protected]@16.1 | |
| MiniRx Store (Redux Store API) | 5.1.0 | 385.49 | Uses ts-action for actions | [email protected]@5.1--redux-store-api |
| Akita | 8.0.1 | 396.68 | [email protected]@8.0 | |
| NgRx Store | 16.1.0 | 402.90 | Uses ngrx/effects for effects | [email protected]@16.1 |
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. "[email protected]")
- Specify the Angular version and the state management library (and version) in the branch name: e.g. "[email protected]@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. "[email protected]")
- 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. "[email protected]@17.0.0") and link that branch in the README