Skip to content

Latest commit

 

History

History
65 lines (51 loc) · 11.3 KB

README.md

File metadata and controls

65 lines (51 loc) · 11.3 KB
Raw

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 17.0.3

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

Angular 16.1

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

Contributing

You are welcome to add your favourite state management library as well!

You can follow these steps:

  1. Fork and clone the repo
  2. Create a branch based on master (or based on another branch with a familiar state management lib (e.g. "[email protected]")
  3. Specify the Angular version and the state management library (and version) in the branch name: e.g. "[email protected]@17.0.0")
  4. 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)
  5. Run npm run build:stats to check the bundle size
  6. 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]")
  7. I will review your PR and add your results to the README on the master branch
  8. 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