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
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 insrc/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
ausimport { firebaseAuth, User } from './firebase';
, da SieUser
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,
durchimport '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
undQuerySnapshot
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 mitonSnapshot()
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 mitonSnapshot()
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()
undsubscribeToAllTickerChanges()
aussrc/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 SiegetDoc
hinzu und entfernen SieonSnapshot
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 VariableloadRealtimeService
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 eineasync
-Funktion, damit wirawait
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
- Anleitung zum Upgrade von Version 8 auf Version 9
- Weitere Informationen zu Version 9
- Einstieg in Version 9