Diese Seite wurde von der Cloud Translation API übersetzt.

Web-App mit dem modularen Firebase JS SDK optimieren

1. Hinweis

Das modulare Firebase JS SDK ist eine Neufassung des vorhandenen JS SDK und wird als nächste Hauptversion veröffentlicht. So können Entwickler nicht verwendeten Code aus dem Firebase JS SDK ausschließen, um kleinere Bundles zu erstellen und eine bessere Leistung zu erzielen.

Der auffälligste Unterschied im modularen JS SDK besteht darin, dass Funktionen jetzt in kostenlos schwebenden Funktionen organisiert sind, die Sie importieren, anstatt in einem einzigen firebase-Namespace, der alles enthält. Diese neue Art der Codeorganisation ermöglicht das Tree Shaking. Außerdem erfahren Sie, wie Sie jede App, die derzeit das Firebase JS SDK v8 verwendet, auf die neue modulare Version umstellen.

Für einen reibungslosen Upgrade-Vorgang werden mehrere Kompatibilitätspakete bereitgestellt. In diesem Codelab erfahren Sie, wie Sie die App mithilfe der Kompatibilitätspakete Stück für Stück portieren.

Umfang

In diesem Codelab migrieren Sie in drei Schritten nach und nach eine vorhandene Webanwendung für eine Aktien-Watchlist, die das v8-JS-SDK verwendet, auf das neue modulare JS-SDK:

App auf die Kompatibilitätspakete umstellen
Die App nach und nach von den Kompatibilitätspaketen auf die modulare API umstellen
Firestore Lite verwenden, eine schlanke Implementierung des Firestore SDK, um die Leistung der App weiter zu verbessern

In diesem Codelab geht es um das Upgrade des Firebase SDK. Andere Konzepte und Codeblöcke werden nicht beachtet und stehen zum einfachen Kopieren und Einfügen zur Verfügung.

Voraussetzungen

Einen beliebigen Browser, z. B. Chrome
Die IDE/den Texteditor Ihrer Wahl, z. B. WebStorm, Atom, Sublime oder VS Code
Der Paketmanager npm, der normalerweise mit Node.js geliefert wird
Der Beispielcode des Codelabs (wie Sie den Code abrufen, erfahren Sie im nächsten Schritt des Codelabs)

2. Einrichten

Code abrufen

Alles, was Sie für dieses Projekt benötigen, befindet sich in einem Git-Repository. Laden Sie zuerst den Code herunter und öffnen Sie ihn in Ihrer bevorzugten Entwicklungsumgebung.

Klonen Sie das GitHub-Repository des Codelabs über die Befehlszeile:

git clone https://github.com/FirebaseExtended/codelab-modular-sdk.git

Wenn Sie Git nicht installiert haben, können Sie das Repository als ZIP-Datei herunterladen und die heruntergeladene ZIP-Datei entpacken.

App importieren

Öffnen oder importieren Sie das Verzeichnis codelab-modular-sdk in Ihrer IDE.
Führen Sie npm install aus, um die Abhängigkeiten zu installieren, die zum lokalen Erstellen und Ausführen der Anwendung erforderlich sind.
Führen Sie npm run build aus, um die App zu erstellen.
Führen Sie npm run serve aus, um den Webserver zu starten.
Öffnen Sie einen Browsertab und rufen Sie http://localhost:8080 auf.

3. Baseline festlegen

Wo fangen Sie an?

Ausgangspunkt ist eine App für eine Aktien-Watchlist, die für dieses Codelab entwickelt wurde. Der Code wurde vereinfacht, um die Konzepte in diesem Codelab zu veranschaulichen. Es gibt nur wenig Fehlerbehandlung. Wenn Sie diesen Code in einer Produktions-App wiederverwenden, müssen Sie alle Fehler beheben und den gesamten Code vollständig testen.

Prüfen Sie, ob alles in der App funktioniert:

Melden Sie sich über die Schaltfläche Anmelden rechts oben anonym an.
Nach der Anmeldung suchen Sie nach „NFLX“, „SBUX“ und „T“ und fügen Sie sie der Merkliste hinzu. Klicken Sie dazu auf die Schaltfläche Hinzufügen, geben Sie die Buchstaben ein und klicken Sie auf die Suchergebniszeile, die unten angezeigt wird.
Wenn Sie einen Wert aus der Beobachtungsliste entfernen möchten, klicken Sie am Ende der Zeile auf das X.
Sie können sich den Aktienkurs in Echtzeit ansehen.
Öffnen Sie die Chrome-Entwicklertools, rufen Sie den Tab Netzwerk auf und aktivieren Sie die Optionen Cache deaktivieren und Große Anfragezeilen verwenden. Wenn Sie Cache deaktivieren auswählen, erhalten Sie nach einer Aktualisierung immer die neuesten Änderungen. Mit Große Anfragezeilen verwenden wird in der Zeile sowohl die übertragene Größe als auch die Ressourcengröße für eine Ressource angezeigt. In diesem Codelab geht es hauptsächlich um die Größe von main.js.

Laden Sie die App unter verschiedenen Netzwerkbedingungen mit simulierter Drosselung. Sie verwenden Langsames 3G, um die Ladezeit in diesem Codelab zu messen, da hier eine kleinere Bundle-Größe am hilfreichsten ist.

Jetzt können Sie mit der Migration der App zur neuen modularen API beginnen.

4. Kompatibilitätspakete verwenden

Mit den Kompatibilitätspaketen können Sie auf die neue SDK-Version umstellen, ohne den gesamten Firebase-Code auf einmal zu ändern. Sie können sie nach und nach auf die modulare API umstellen.

In diesem Schritt aktualisieren Sie die Firebase-Bibliothek von Version 8 auf die neue Version und ändern den Code so, dass die Kompatibilitätspakete verwendet werden. In den folgenden Schritten erfahren Sie, wie Sie zuerst nur den Firebase Auth-Code auf die modulare API umstellen und dann den Firestore-Code aktualisieren.

Am Ende jedes Schritts sollten Sie die App ohne Unterbrechungen kompilieren und ausführen können. Außerdem sollte die Größe des Bundles bei der Migration jedes Produkts sinken.

Neues SDK herunterladen

Suchen Sie im package.json den Abschnitt „Abhängigkeiten“ und ersetzen Sie ihn durch Folgendes:

package.json

"dependencies": {
    "firebase": "^9.0.0" 
}

Abhängigkeiten neu installieren

Da wir die Version der Abhängigkeit geändert haben, müssen wir npm install noch einmal ausführen, um die neue Version der Abhängigkeit zu erhalten.

Importpfade ändern

Die Kompatibilitätspakete werden unter dem Untermodul firebase/compat bereitgestellt. Daher aktualisieren wir die Importpfade entsprechend:

Datei src/firebase.ts aufrufen
Ersetzen Sie die vorhandenen Importe durch die folgenden Importe:

src/firebase.ts

import firebase from 'firebase/compat/app'; 
import 'firebase/compat/auth'; 
import 'firebase/compat/firestore';

Funktion der App prüfen

Führen Sie npm run build aus, um die App neu zu erstellen.
Öffnen Sie einen Browsertab mit http://localhost:8080 oder aktualisieren Sie den vorhandenen Tab.
Testen Sie die App. Alles sollte weiterhin funktionieren.

5. Auth auf die modulare API umstellen

Sie können Firebase-Produkte in beliebiger Reihenfolge upgraden. In diesem Codelab führen Sie zuerst ein Auth-Upgrade durch, um die grundlegenden Konzepte zu erlernen, da die Auth API relativ einfach ist. Das Upgrade auf Firestore ist etwas aufwendiger. Wie Sie das tun, erfahren Sie als Nächstes.

Authentifizierungsinitialisierung aktualisieren

Datei src/firebase.ts aufrufen
Fügen Sie den folgenden Import hinzu:

src/firebase.ts

import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';

import ‘firebase/compat/auth'. löschen
Ersetzen Sie export const firebaseAuth = app.auth(); durch:

src/firebase.ts

export const firebaseAuth = initializeAuth(app, { persistence: [indexedDBLocalPersistence] });

Entfernen Sie export type User = firebase.User; am Ende der Datei. User wird direkt in src/auth.ts exportiert, das Sie als Nächstes ändern.

Authentifizierungscode aktualisieren

Datei src/auth.ts aufrufen
Fügen Sie oben in der Datei die folgenden Importe hinzu:

src/auth.ts

import { 
    signInAnonymously, 
    signOut,
    onAuthStateChanged,
    User
} from 'firebase/auth';

Entfernen Sie User aus import { firebaseAuth, User } from './firebase';, da Sie User bereits aus ‘firebase/auth'. importiert haben.
Aktualisieren Sie die Funktionen, damit sie die modulare API verwenden.

Wie Sie bereits bei der Aktualisierung der Importanweisung gesehen haben, sind Pakete in Version 9 um Funktionen herum organisiert, die Sie importieren können. Das unterscheidet sich von den APIs der Version 8, die auf einem durch Punkte verknüpften Namespace und Dienstmuster basieren. Diese neue Codeorganisation ermöglicht das Entfernen nicht verwendeter Codeteile, da Build-Tools analysieren können, welcher Code verwendet wird und welcher nicht.

In Version 9 werden Dienste als erstes Argument an die Funktionen übergeben. Dienste sind die Objekte, die Sie beim Initialisieren eines Firebase-Dienstes erhalten, z.B. das Objekt, das von getAuth() oder initializeAuth() zurückgegeben wird. Sie enthalten den Status eines bestimmten Firebase-Dienstes und die Funktion verwendet den Status, um ihre Aufgaben auszuführen. Anhand dieses Musters implementieren wir die folgenden Funktionen:

src/auth.ts

export function firebaseSignInAnonymously() { 
    return signInAnonymously(firebaseAuth); 
} 

export function firebaseSignOut() { 
    return signOut(firebaseAuth); 
} 

export function onUserChange(callback: (user: User | null) => void) { 
    return onAuthStateChanged(firebaseAuth, callback); 
} 

export { User } from 'firebase/auth';

Funktion der App prüfen

Führen Sie npm run build aus, um die App neu zu erstellen.
Öffnen Sie einen Browsertab mit http://localhost:8080 oder aktualisieren Sie den vorhandenen Tab.
Testen Sie die App. Alles sollte weiterhin funktionieren.

Größe des Bundles prüfen

Öffnen Sie die Chrome-Entwicklertools.
Wechseln Sie zum Tab Netzwerk.
Aktualisieren Sie die Seite, um Netzwerkanfragen zu erfassen.
Suchen Sie nach „main.js“ und prüfen Sie die Größe. Sie haben die Bundle-Größe um 100 KB (36 KB komprimiert) bzw. um etwa 22% reduziert, indem Sie nur ein paar Codezeilen geändert haben. Außerdem wird die Website bei einer langsamen 3G-Verbindung 0,75 Sekunden schneller geladen.

6. Firebase App und Firestore auf die modulare API umstellen

Firebase-Initialisierung aktualisieren

Datei src/firebase.ts. aufrufen
Ersetzen Sie import firebase from ‘firebase/compat/app'; durch:

src/firebase.ts

import { initializeApp } from 'firebase/app';

Ersetzen Sie const app = firebase.initializeApp({...}); durch:

src/firebase.ts

const app = initializeApp({
    apiKey: "AIzaSyBnRKitQGBX0u8k4COtDTILYxCJuMf7xzE", 
    authDomain: "exchange-rates-adcf6.firebaseapp.com", 
    databaseURL: "https://exchange-rates-adcf6.firebaseio.com", 
    projectId: "exchange-rates-adcf6", 
    storageBucket: "exchange-rates-adcf6.firebasestorage.app", 
    messagingSenderId: "875614679042", 
    appId: "1:875614679042:web:5813c3e70a33e91ba0371b"
});

Firestore-Initialisierung aktualisieren

Ersetzen Sie in derselben Datei src/firebase.ts, durch import 'firebase/compat/firestore';.

src/firebase.ts

import { getFirestore } from 'firebase/firestore';

Ersetzen Sie export const firestore = app.firestore(); durch:

src/firebase.ts

export const firestore = getFirestore();

Alle Zeilen nach „export const firestore = ...“ entfernen

Importe aktualisieren

Datei src/services.ts. öffnen
Entfernen Sie FirestoreFieldPath, FirestoreFieldValue und QuerySnapshot aus dem Import. Der Import aus './firebase' sollte jetzt so aussehen:

src/services.ts

import { firestore } from './firebase';

Importieren Sie die Funktionen und Typen, die Sie verwenden möchten, oben in die Datei:

    **src/services.ts**

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove, 
    onSnapshot, 
    query, 
    where, 
    documentId, 
    QuerySnapshot
} from 'firebase/firestore';

search() aktualisieren

Erstellen Sie eine Referenz auf die Sammlung, die alle Ticker enthält:

src/services.ts

const tickersCollRef = collection(firestore, 'current');

Verwenden Sie getDocs(), um alle Dokumente aus der Sammlung abzurufen:

src/services.ts

const tickers = await getDocs(tickersCollRef);

Den fertigen Code finden Sie unter search().

Update addToWatchList()

Erstelle mit doc() eine Dokumentreferenz auf die Merkliste des Nutzers und füge mit setDoc() und arrayUnion() einen Ticker hinzu:

src/services.ts

export function addToWatchList(ticker: string, user: User) {
      const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
      return setDoc(watchlistRef, {
       tickers: arrayUnion(ticker)
   }, { merge: true });
}

deleteFromWatchList() aktualisieren

So entfernen Sie einen Ticker mit setDoc() und arrayRemove() aus der Merkliste eines Nutzers:

src/services.ts

export function deleteFromWatchList(ticker: string, user: User) {
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   return setDoc(watchlistRef, {
       tickers: arrayRemove(ticker)
   }, { merge: true });
}

Update subscribeToTickerChanges()

Erstelle zuerst mit doc() einen Dokumentbezug auf die Merkliste des Nutzers und höre dann mit onSnapshot() auf Änderungen an der Merkliste:

src/services.ts

const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
const unsubscribe = onSnapshot(watchlistRef, snapshot => {
   /* subscribe to ticker price changes */
});

Nachdem Sie die Aktiensymbole in der Beobachtungsliste hinzugefügt haben, können Sie mit query() eine Abfrage erstellen, um ihre Preise abzurufen, und mit onSnapshot() die Preisänderungen beobachten:

src/services.ts

const priceQuery = query(
    collection(firestore, 'current'),
    where(documentId(), 'in', tickers)
);
unsubscribePrevTickerChanges = onSnapshot(priceQuery, snapshot => {
               if (firstload) {
                   performance && performance.measure("initial-data-load");
                   firstload = false;
                   logPerformance();
               }
               const stocks = formatSDKStocks(snapshot);
               callback(stocks);
  });

Die vollständige Implementierung findest du unter subscribeToTickerChanges().

subscribeToAllTickerChanges() aktualisieren

Erstellen Sie zuerst mit collection() eine Referenz auf die Sammlung, die die Preise für alle Ticker enthält, und verwenden Sie dann onSnapshot(), um Preisänderungen zu verfolgen:

src/services.ts

export function subscribeToAllTickerChanges(callback: TickerChangesCallBack) {
   const tickersCollRef = collection(firestore, 'current');
   return onSnapshot(tickersCollRef, snapshot => {
       if (firstload) {
           performance && performance.measure("initial-data-load");
           firstload = false;
           logPerformance();
       }
       const stocks = formatSDKStocks(snapshot);
       callback(stocks);
   });
}

Funktion der App prüfen

Führen Sie npm run build aus, um die App neu zu erstellen.
Öffnen Sie einen Browsertab mit http://localhost:8080 oder aktualisieren Sie den vorhandenen Tab.
Testen Sie die App. Alles sollte weiterhin funktionieren.

Größe des Bundles prüfen

Öffnen Sie die Chrome-Entwicklertools.
Wechseln Sie zum Tab Netzwerk.
Aktualisieren Sie die Seite, um Netzwerkanfragen zu erfassen.
Suchen Sie nach main.js und prüfen Sie die Größe. Vergleichen Sie das noch einmal mit der ursprünglichen Bundle-Größe: Wir haben die Bundle-Größe um über 200 KB (63,8 KB komprimiert) bzw.um 50% reduziert, was einer Ladezeit von 1,3 Sekunden weniger entspricht.

7. Firestore Lite verwenden, um das erste Seitenrendering zu beschleunigen

Was ist Firestore Lite?

Das Firestore SDK bietet komplexes Caching, Echtzeitstreaming, nichtflüchtigen Speicher, Offlinesynchronisierung mit mehreren Tabs, Wiederholungen, optimistische Datenbankübereinstimmung und vieles mehr. Daher ist es ziemlich groß. Möglicherweise möchten Sie die Daten aber nur einmal abrufen, ohne die erweiterten Funktionen zu benötigen. Für diese Fälle hat Firestore eine einfache und schlanke Lösung entwickelt: ein brandneues Paket – Firestore Lite.

Ein guter Anwendungsfall für Firestore Lite ist die Optimierung der Leistung des ersten Seitenrenderings. Dabei müssen Sie nur wissen, ob ein Nutzer angemeldet ist, und dann einige Daten aus Firestore lesen, um sie anzuzeigen.

In diesem Schritt erfahren Sie, wie Sie mit Firestore Lite die Bundle-Größe reduzieren, um das erste Seitenrendering zu beschleunigen, und dann das Firestore SDK dynamisch laden, um Echtzeitaktualisierungen zu abonnieren.

Sie refaktorisieren den Code, um:

Verschieben Sie Echtzeitdienste in eine separate Datei, damit sie mithilfe des dynamischen Imports dynamisch geladen werden können.
Erstellen Sie neue Funktionen, um mit Firestore Lite eine Beobachtungsliste und Aktienkurse abzurufen.
Verwenden Sie die neuen Firestore Lite-Funktionen, um Daten für das erste Seitenrendering abzurufen, und laden Sie dann die Echtzeitdienste dynamisch, um Echtzeitaktualisierungen zu empfangen.

Echtzeitdienste in eine neue Datei verschieben

Erstellen Sie eine neue Datei mit dem Namen src/services.realtime.ts..
Verschieben Sie die Funktionen subscribeToTickerChanges() und subscribeToAllTickerChanges() aus src/services.ts in die neue Datei.
Fügen Sie die erforderlichen Importe oben in die neue Datei ein.

Sie müssen hier noch einige Änderungen vornehmen:

Erstellen Sie zuerst eine Firestore-Instanz aus dem Haupt-Firestore SDK oben in der Datei, die in den Funktionen verwendet werden soll. Sie können die Firestore-Instanz aus firebase.ts hier nicht importieren, da Sie sie in wenigen Schritten in eine Firestore Lite-Instanz ändern, die nur für das erste Seitenrendering verwendet wird.
Zweitens: Entfernen Sie die Variable firstload und den If-Block, der durch sie geschützt ist. Ihre Funktionen werden in neue Funktionen verschoben, die Sie im nächsten Schritt erstellen.

src/services.realtime.ts

import { User } from './auth'
import { TickerChange } from './models';
import { collection, doc, onSnapshot, query, where, documentId, getFirestore } from 'firebase/firestore';
import { formatSDKStocks } from './services';

const firestore = getFirestore();
type TickerChangesCallBack = (changes: TickerChange[]) => void

export function subscribeToTickerChanges(user: User, callback: TickerChangesCallBack) {

   let unsubscribePrevTickerChanges: () => void;

   // Subscribe to watchlist changes. We will get an update whenever a ticker is added/deleted to the watchlist
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   const unsubscribe = onSnapshot(watchlistRef, snapshot => {
       const doc = snapshot.data();
       const tickers = doc ? doc.tickers : [];

       if (unsubscribePrevTickerChanges) {
           unsubscribePrevTickerChanges();
       }

       if (tickers.length === 0) {
           callback([]);
       } else {
           // Query to get current price for tickers in the watchlist
           const priceQuery = query(
               collection(firestore, 'current'),
               where(documentId(), 'in', tickers)
           );

           // Subscribe to price changes for tickers in the watchlist
           unsubscribePrevTickerChanges = onSnapshot(priceQuery, snapshot => {
               const stocks = formatSDKStocks(snapshot);
               callback(stocks);
           });
       }
   });
   return () => {
       if (unsubscribePrevTickerChanges) {
           unsubscribePrevTickerChanges();
       }
       unsubscribe();
   };
}

export function subscribeToAllTickerChanges(callback: TickerChangesCallBack) {
   const tickersCollRef = collection(firestore, 'current');
   return onSnapshot(tickersCollRef, snapshot => {
       const stocks = formatSDKStocks(snapshot);
       callback(stocks);
   });
}

Daten mit Firestore Lite abrufen

„src/services.ts.“ öffnen
Ändern Sie den Importpfad von ‘firebase/firestore' in ‘firebase/firestore/lite',, fügen Sie getDoc hinzu und entfernen Sie onSnapshot aus der Importliste.:

src/services.ts

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove,
//  onSnapshot, // firestore lite doesn't support realtime updates
    query, 
    where, 
    documentId, 
    QuerySnapshot, 
    getDoc // add this import
} from 'firebase/firestore/lite';

Fügen Sie Funktionen hinzu, um mit Firestore Lite Daten abzurufen, die für das erste Seitenrendering erforderlich sind:

src/services.ts

export async function getTickerChanges(tickers: string[]): Promise<TickerChange[]> {

   if (tickers.length === 0) {
       return [];
   }

   const priceQuery = query(
       collection(firestore, 'current'),
       where(documentId(), 'in', tickers)
   );
   const snapshot = await getDocs(priceQuery);
   performance && performance.measure("initial-data-load");
   logPerformance();
   return formatSDKStocks(snapshot);
}

export async function getTickers(user: User): Promise<string[]> {
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   const data =  (await getDoc(watchlistRef)).data();

   return data ? data.tickers : [];
}

export async function getAllTickerChanges(): Promise<TickerChange[]> {
   const tickersCollRef = collection(firestore, 'current');
   const snapshot = await getDocs(tickersCollRef);
   performance && performance.measure("initial-data-load");
   logPerformance();
   return formatSDKStocks(snapshot);
}

Öffnen Sie src/firebase.ts und ändern Sie den Importpfad von ‘firebase/firestore' in ‘firebase/firestore/lite':.

src/firebase.ts

import { getFirestore } from 'firebase/firestore/lite';

Alle Elemente zusammenführen

„src/main.ts.“ öffnen
Sie benötigen die neu erstellten Funktionen, um Daten für das erste Seitenrendering abzurufen, und einige Hilfsfunktionen, um den App-Status zu verwalten. Aktualisieren Sie jetzt die Importe:

src/main.ts

import { renderLoginPage, renderUserPage } from './renderer';
import { getAllTickerChanges, getTickerChanges, getTickers } from './services';
import { onUserChange } from './auth';
import { getState, setRealtimeServicesLoaded, setUser } from './state';
import './styles.scss';

Laden Sie src/services.realtime oben in der Datei mit einem dynamischen Import. Die Variable loadRealtimeService ist ein Versprechen, das nach dem Laden des Codes mit den Echtzeitdiensten erfüllt wird. Sie verwenden ihn später, um Echtzeit-Updates zu abonnieren.

src/main.ts

const loadRealtimeService = import('./services.realtime');
loadRealtimeService.then(() => {
   setRealtimeServicesLoaded(true);
});

Ändern Sie den Rückruf von onUserChange() in eine async-Funktion, damit wir await im Funktionskörper verwenden können:

src/main.ts

onUserChange(async user => {
 // callback body
});

Rufen Sie jetzt die Daten ab, um die erste Seite mithilfe der neuen Funktionen zu rendern, die wir im vorherigen Schritt erstellt haben.

Suche im onUserChange()-Callback nach der If-Bedingung, bei der ein Nutzer angemeldet ist, und kopiere den Code in die If-Anweisung:

src/main.ts

onUserChange(async user => {
      // LEAVE THE EXISTING CODE UNCHANGED HERE
      ...

      if (user) {
       // REPLACE THESE LINES

       // user page
       setUser(user);

       // show loading screen in 500ms
       const timeoutId = setTimeout(() => {
           renderUserPage(user, {
               loading: true,
               tableData: []
           });
       }, 500);

       // get data once if realtime services haven't been loaded
       if (!getState().realtimeServicesLoaded) {
           const tickers = await getTickers(user);
           const tickerData = await getTickerChanges(tickers);
           clearTimeout(timeoutId);
           renderUserPage(user, { tableData: tickerData });
       }

       // subscribe to realtime updates once realtime services are loaded
       loadRealtimeService.then(({ subscribeToTickerChanges }) => {
           unsubscribeTickerChanges = subscribeToTickerChanges(user, stockData => {
               clearTimeout(timeoutId);
               renderUserPage(user, { tableData: stockData })
           });
       });
   } else {
     // DON'T EDIT THIS PART, YET   
   }
}

Im else-Block, in dem kein Nutzer angemeldet ist, werden mit Firestore Lite Preisinformationen für alle Aktien abgerufen, die Seite gerendert und dann Preisänderungen abgehört, sobald Echtzeitdienste geladen wurden:

src/main.ts

if (user) {
   // DON'T EDIT THIS PART, WHICH WE JUST CHANGED ABOVE
   ...
} else {
   // REPLACE THESE LINES

   // login page
   setUser(null);

   // show loading screen in 500ms
   const timeoutId = setTimeout(() => {
       renderLoginPage('Landing page', {
           loading: true,
           tableData: []
       });
   }, 500);

   // get data once if realtime services haven't been loaded
   if (!getState().realtimeServicesLoaded) {
       const tickerData = await getAllTickerChanges();
       clearTimeout(timeoutId);
       renderLoginPage('Landing page', { tableData: tickerData });
   }

   // subscribe to realtime updates once realtime services are loaded
   loadRealtimeService.then(({ subscribeToAllTickerChanges }) => {
       unsubscribeAllTickerChanges = subscribeToAllTickerChanges(stockData => {
           clearTimeout(timeoutId);
           renderLoginPage('Landing page', { tableData: stockData })
       });
   });
}

Den fertigen Code finden Sie unter src/main.ts.

Funktion der App prüfen

Führen Sie npm run build aus, um die App neu zu erstellen.
Öffnen Sie einen Browsertab mit http://localhost:8080 oder aktualisieren Sie den vorhandenen Tab.

Größe des Bundles prüfen

Öffnen Sie die Chrome-Entwicklertools.
Wechseln Sie zum Tab Netzwerk.
Seite aktualisieren, um Netzwerkanfragen zu erfassen
Suchen Sie nach main.js und prüfen Sie die Größe.
Jetzt sind es nur noch 115 KB (34,5 KB komprimiert). Das ist 75% kleiner als die ursprüngliche Bundle-Größe von 446 KB(138 KB komprimiert). Dadurch wird die Website über eine 3G-Verbindung über 2 Sekunden schneller geladen – eine deutliche Leistungs- und Nutzerfreundlichkeitsverbesserung.

8. Glückwunsch

Herzlichen Glückwunsch, Sie haben die App erfolgreich optimiert und sie kleiner und schneller gemacht.

Sie haben die Compat-Pakete verwendet, um die App Stück für Stück zu aktualisieren, und Firestore Lite, um das erste Seitenrendering zu beschleunigen und dann den Haupt-Firestore dynamisch zu laden, um Preisänderungen zu streamen.

Außerdem haben Sie die Größe des Bundles reduziert und die Ladezeit im Laufe dieses Codelabs verbessert:

main.js	Ressourcengröße (KB)	Gzip-Größe (KB)	Ladezeit (Sek.) (über langsames 3G)
v8	446	138	4.92
v9 compat	429	124	4.65
Nur modulare Authentifizierung in Version 9	348	102	4.2
V9 vollständig modular	244	74,6	3.66
Version 9 vollständig modular + Firestore Lite	117	34,9	2,88

Sie kennen jetzt die wichtigsten Schritte, die erforderlich sind, um eine Web-App, die das Firebase JS SDK v8 verwendet, auf das neue modulare JS SDK umzustellen.

Weitere Informationen

Referenzdokumente

https://firebase.google.com/docs/reference/js/v9