Inkrementelle Einführung

Der React Compiler kann inkrementell eingeführt werden, sodass Sie ihn zunächst in bestimmten Teilen Ihrer Codebasis testen können. Diese Anleitung zeigt Ihnen, wie Sie den Compiler schrittweise in bestehenden Projekten einführen.

Warum inkrementelle Einführung?

Der React Compiler ist darauf ausgelegt, Ihre gesamte Codebasis automatisch zu optimieren, aber Sie müssen ihn nicht auf einmal einführen. Die inkrementelle Einführung gibt Ihnen Kontrolle über den Rollout-Prozess und ermöglicht es Ihnen, den Compiler zunächst in kleinen Teilen Ihrer App zu testen, bevor Sie ihn auf den Rest ausweiten.

Mit einem kleinen Start bauen Sie Vertrauen in die Optimierungen des Compilers auf. Sie können überprüfen, ob Ihre App mit kompiliertem Code korrekt funktioniert, Leistungsverbesserungen messen und eventuelle anwendungsspezifische Grenzfälle identifizieren. Dieser Ansatz ist besonders wertvoll für Produktionsanwendungen, bei denen Stabilität entscheidend ist.

Die inkrementelle Einführung erleichtert es auch, etwaige Verstöße gegen die React-Regeln zu beheben, die der Compiler möglicherweise findet. Anstatt Verstöße in der gesamten Codebasis auf einmal zu korrigieren, können Sie sie systematisch angehen, während Sie die Compiler-Abdeckung erweitern. Dies macht die Migration handhabbar und reduziert das Risiko, Fehler einzuführen.

Indem Sie steuern, welche Teile Ihres Codes kompiliert werden, können Sie auch A/B-Tests durchführen, um die tatsächliche Auswirkung der Optimierungen des Compilers zu messen. Diese Daten helfen Ihnen, fundierte Entscheidungen über eine vollständige Einführung zu treffen und zeigen den Wert für Ihr Team auf.

Ansätze zur inkrementellen Einführung

Es gibt drei Hauptansätze, um den React Compiler inkrementell einzuführen:

1. Babel-Overrides– Wenden Sie den Compiler auf bestimmte Verzeichnisse an
2. Opt-in mit "use memo"– Kompilieren Sie nur Komponenten, die explizit einwilligen
3. Laufzeit-Gating– Steuern Sie die Kompilierung mit Feature-Flags

Alle Ansätze ermöglichen es Ihnen, den Compiler in bestimmten Teilen Ihrer Anwendung zu testen, bevor Sie ihn vollständig ausrollen.

Verzeichnisbasierte Einführung mit Babel-Overrides

Dieoverrides-Option von Babel ermöglicht es Ihnen, verschiedene Plugins auf verschiedene Teile Ihrer Codebasis anzuwenden. Dies ist ideal, um den React Compiler schrittweise Verzeichnis für Verzeichnis einzuführen.

Grundkonfiguration

Beginnen Sie damit, den Compiler auf ein bestimmtes Verzeichnis anzuwenden:

Abdeckung erweitern

Wenn Sie Vertrauen gewonnen haben, fügen Sie weitere Verzeichnisse hinzu:

Mit Compiler-Optionen

Sie können auch Compiler-Optionen pro Override konfigurieren:

Opt-in-Modus mit "use memo"

Für maximale Kontrolle können SiecompilationMode: 'annotation'verwenden, um nur Komponenten und Hooks zu kompilieren, die explizit mit der"use memo"-Direktive einwilligen.

Konfiguration des Annotationsmodus

Verwendung der Direktive

Fügen Sie"use memo"am Anfang der Funktionen hinzu, die Sie kompilieren möchten:

MitcompilationMode: 'annotation'müssen Sie:

• Zu jeder Komponente, die Sie optimieren möchten,"use memo" hinzufügen
• Zu jedem benutzerdefinierten Hook"use memo"hinzufügen
• Nicht vergessen, es auch zu neuen Komponenten hinzuzufügen

Dies gibt Ihnen präzise Kontrolle darüber, welche Komponenten kompiliert werden, während Sie die Auswirkungen des Compilers bewerten.

Laufzeit-Feature-Flags mit Gating

Die Optiongatingermöglicht es Ihnen, die Kompilierung zur Laufzeit mithilfe von Feature-Flags zu steuern. Dies ist nützlich für A/B-Tests oder die schrittweise Einführung des Compilers basierend auf Benutzersegmenten.

Wie Gating funktioniert

Der Compiler umschließt optimierten Code mit einer Laufzeitprüfung. Wenn das Gatetruezurückgibt, wird die optimierte Version ausgeführt. Andernfalls wird der ursprüngliche Code ausgeführt.

Gating-Konfiguration

Implementierung des Feature-Flags

Erstellen Sie ein Modul, das Ihre Gating-Funktion exportiert:

Fehlerbehebung bei der Einführung

Wenn Sie während der Einführung auf Probleme stoßen:

1. Verwenden Sie"use no memo", um problematische Komponenten vorübergehend auszuschließen
2. Lesen Sie dieAnleitung zur Fehlerbehebungfür häufige Probleme
3. Beheben Sie vom ESLint-Plugin identifizierte Verstöße gegen die React-Regeln
4. Erwägen Sie die Verwendung voncompilationMode: 'annotation'für eine schrittweise Einführung

Nächste Schritte

• Lesen Sie dieKonfigurationsanleitungfür weitere Optionen
• Erfahren Sie mehr überDebugging-Techniken
• Sehen Sie sich dieAPI-Referenzfür alle Compiler-Optionen an