Der Juli brachte für das RxAngular-Team eine Reihe spannender Neuerungen und Verbesserungen. Mit @rx-angular/rebundle erschien ein komplett neues Paket, die Dokumentation wurde komplett überarbeitet und Ende des Monats folgte ein gemeinsames Release aller sechs Pakete. Im Mittelpunkt stand dabei ein Thema, das in vielen Angular-Projekten erst spät auffällt: wie viele JavaScript-Dateien eine Anwendung beim Laden tatsächlich anfordert.

Angular baut schneller, aber die App lädt nicht automatisch schneller

Seit der Umstellung auf das neue Angular-Build-System sind Builds zwar schneller geworden, größere Anwendungen erzeugen jedoch oft sehr viele kleine JavaScript-Dateien. Diese zusätzlichen Anfragen können die Ladezeit spürbar verschlechtern, obwohl die eigentliche Code-Menge unverändert bleibt.

Das Angular-Team hat für dieses Problem einen experimentellen Chunk-Optimizer eingeführt, der die Ausgabe nachträglich zusammenfasst. Er lässt sich allerdings weder konfigurieren noch erweitern. Hier setzt das neue Paket an.

Neu: @rx-angular/rebundle

Die erste Version von @rx-angular/rebundle ist am 3. Juli erschienen, die nächste Version folgte am 21. Juli. Das Paket ist ein esbuild-Plugin: Es liest nach dem Build die Metadaten von esbuild, baut daraus einen Modulgraphen und fasst fragmentierte Chunks im Speicher mit Rolldown zusammen, bevor sie auf die Festplatte geschrieben werden. Der Code wird dabei nicht erneut transpiliert.

Wie die Chunks gruppiert werden, bestimmen sogenannte Merge-Strategien. Standardmäßig nutzt rebundle die Reachability-Strategie: Sie ordnet jeden Chunk dem Einstiegspunkt zu, über den er ausschließlich erreichbar ist. So sinkt die Zahl der Dateien, ohne dass auf einem erreichbaren Pfad mehr JavaScript geladen wird. Für spezielle Fälle gibt es zwei weitere Strategien (Static Closure und Common), die sich kombinieren oder durch eigene Regeln ergänzen lassen.

Besonders wichtig dabei: rebundle lässt sich mit wenig Aufwand in bestehende Projekte integrieren. Die Einrichtung erfolgt weitgehend automatisch und erfordert in der Regel keine Änderungen am Anwendungscode. Zudem liefert das Tool transparente Auswertungen zu den Auswirkungen der Optimierung und bietet flexible Konfigurationsmöglichkeiten für unterschiedliche Projektanforderungen.

Genauere Details im Artikel Faster Builds, Slower Applications? Optimizing Angular's Bundle Output. Die Dokumentation zu rebundle ist seit dem 22. Juli Teil der offiziellen RxAngular-Docs.

Neue Dokumentation auf rx-angular.io

Die Dokumentation war das zweite große Projekt im Juli. Rund 100 Seiten wurden neu strukturiert und konsequent in Tutorials, Anleitungen, Referenzen und Hintergrundartikel gegliedert. Ein neuer Einstieg, aktualisierte Angular-Beispiele sowie eine verbesserte Navigation erleichtern den Zugang zu RxAngular.

Gleichzeitig wurde die Positionierung von RxAngular geschärft: Angular Signals bleiben die erste Wahl für lokalen Zustand, während RxAngular gezielt bei komplexen asynchronen Anwendungen, großen Datenmengen und Server-Side Rendering unterstützt.

Demo-App überarbeitet und online

Parallel dazu wurde die Demo-App modernisiert. Sie ist jetzt vollständig auf Standalone Components umgestellt, die Demos für rxLet, rxIf, rxFor, Virtual Scrolling, Virtual View und die Render-Strategien haben ein einheitliches Layout bekommen, und veraltete Experimente wurden entfernt. Die Demos sind unter rx-angular.io/demos erreichbar und direkt aus der Doku-Navigation verlinkt.

Rendering: RxVirtualView wird robuster

RxVirtualView sorgt dafür, dass Inhalte nur bei Bedarf gerendert werden, was insbesondere bei großen Listen, Tabellen und Dashboards die Performance verbessert. Im Juli lag der Fokus auf Stabilität: Version 21.2.1 behebt einen Darstellungsfehler und erweitert die automatisierten Tests deutlich, unter anderem für Server-Side Rendering und Hydration.

State, CDK, ISR und ESLint-Plugin

Am 21. Juli wurden alle Pakete gemeinsam veröffentlicht: @rx-angular/cdk 21.1.1, state 21.1.2, template 21.2.1, isr 21.0.2, eslint-plugin 3.0.1 und rebundle 1.0.1. Für state, cdk, isr und das ESLint-Plugin war es ein Dokumentations-Release ohne API-Änderungen. Die Neuerungen aus dem Frühjahr sind damit aber erstmals ausführlich beschrieben, etwa die Möglichkeit, rxState() und rxEffects() einen Injector zu übergeben, oder der HydrationTracker im CDK, mit dem sich der Hydration-Status einer SSR-Anwendung verfolgen lässt.

Wie es weitergeht

Seit August liegen mehrere Erweiterungen im Review, darunter ein visibleRange-Output für den Virtual Scroll Viewport, eine connect-Variante für ein Objekt aus mehreren Quellen in @rx-angular/state, Unterstützung für Express 5 in @rx-angular/isr und Fixes für die DynamicSizeVirtualScrollStrategy. Außerdem in Arbeit sind die Unterstützung für Angular 22 und @rx-angular/speculative-link, ein neues Paket, das Routen spekulativ vorlädt, bevor sie angeklickt werden. 

Fazit

Im Juli hat das RxAngular-Team an zwei Themen gearbeitet: an der Ladezeit großer Angular-Anwendungen und daran, wie leicht sich RxAngular selbst lernen und einsetzen lässt. Die neue Dokumentation und die überarbeiteten Demos zeigen, wo RxAngular neben Signals einen Mehrwert bringt und wie man es dort gezielt einsetzt.

Wer eine große Angular-Anwendung betreibt, kann rebundle ohne Codeänderungen ausprobieren. Feedback, Fehlerberichte und Messergebnisse sind auf GitHub willkommen.

Danke an alle, die daran mitgearbeitet haben, insbesondere Christopher Holder, Hanna Skryl, Kirill Karnaukhov, Enea Jahollari, Michael Hladky und Julian Jandl.