Potenzia la tua app Web eseguendo la migrazione all'SDK modulare Firebase JS

1. Prima di iniziare

L'SDK modulare Firebase JS è una riscrittura dell'SDK JS esistente e verrà rilasciato come prossima versione principale. Consente agli sviluppatori di escludere il codice inutilizzato dall'SDK Firebase JS per creare bundle più piccoli e ottenere prestazioni migliori.

La differenza più evidente nell'SDK JS modulare è che le funzionalità sono ora organizzate in funzioni mobili che importerai, anziché in un unico spazio dei nomi firebase che include tutto. Questo nuovo modo di organizzare il codice è ciò che consente lo scuotimento degli alberi e imparerai come aggiornare qualsiasi app che attualmente utilizza l'SDK Firebase JS v8 a quello modulare.

Per garantire un processo di aggiornamento fluido, viene fornita una serie di pacchetti di compatibilità. In questo codelab imparerai come utilizzare i pacchetti di compatibilità per trasferire l'app pezzo per pezzo.

Cosa costruirai

In questo codelab, migrerai gradualmente un'app Web esistente per la lista di titoli azionari che utilizza l'SDK JS v8 al nuovo SDK JS modulare in tre fasi:

  • Aggiorna l'app per utilizzare i pacchetti di compatibilità
  • Aggiorna l'app dai pacchetti di compatibilità all'API modulare pezzo per pezzo
  • Utilizza Firestore Lite, un'implementazione leggera dell'SDK Firestore, per migliorare ulteriormente le prestazioni dell'app

2d351cb47b604ad7.png

Questo codelab è incentrato sull'aggiornamento dell'SDK Firebase. Altri concetti e blocchi di codice vengono ignorati e possono essere semplicemente copiati e incollati.

Di cosa avrai bisogno

  • Un browser a tua scelta, come Chrome
  • L'IDE/editor di testo di tua scelta, come WebStorm , Atom , Sublime o VS Code
  • Il gestore pacchetti npm , che in genere viene fornito con Node.js
  • Il codice di esempio del codelab (vedi il passaggio successivo del codelab per come ottenere il codice).

2. Preparati

Ottieni il codice

Tutto ciò di cui hai bisogno per questo progetto risiede in un repository Git. Per iniziare, dovrai prendere il codice e aprirlo nel tuo ambiente di sviluppo preferito.

Clona il repository Github del codelab dalla riga di comando:

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

In alternativa, se non hai git installato, puoi scaricare il repository come file ZIP e decomprimere il file zip scaricato.

Importa l'app

  1. Utilizzando il tuo IDE, apri o importa la directory codelab-modular-sdk .
  2. Esegui npm install per installare le dipendenze necessarie per creare ed eseguire l'app localmente.
  3. Esegui npm run build per creare l'app.
  4. Esegui npm run serve per avviare il server web
  5. Aprire una scheda del browser su http://localhost:8080

71a8a7d47392e8f4.png

3. Stabilire una linea di base

Qual è il tuo punto di partenza?

Il punto di partenza è un'app watchlist di azioni progettata per questo codelab. Il codice è stato semplificato per illustrare i concetti di questo codelab e prevede una gestione degli errori ridotta. Se scegli di riutilizzare parte di questo codice in un'app di produzione, assicurati di gestire eventuali errori e di testare completamente tutto il codice.

Assicurati che tutto funzioni nell'app:

  1. Accedi in modo anonimo utilizzando il pulsante di accesso nell'angolo in alto a destra.
  2. Dopo aver effettuato l'accesso, cerca e aggiungi "NFLX", "SBUX" e "T" alla watchlist facendo clic sul pulsante Aggiungi , digitando le lettere e facendo clic sulla riga dei risultati di ricerca che viene visualizzata di seguito.
  3. Rimuovere un titolo dalla watchlist facendo clic sulla x alla fine della riga.
  4. Guarda gli aggiornamenti in tempo reale del prezzo delle azioni.
  5. Apri Chrome DevTools, vai alla scheda Rete e seleziona Disabilita cache e Utilizza righe di richiesta di grandi dimensioni . Disabilita cache assicura che vengano sempre visualizzate le modifiche più recenti dopo un aggiornamento e Usa righe di richiesta di grandi dimensioni fa sì che la riga visualizzi sia la dimensione trasmessa che la dimensione della risorsa per una risorsa. In questo codelab siamo interessati principalmente alla dimensione di main.js .

48a096debb2aa940.png

  1. Carica l'app in diverse condizioni di rete utilizzando la limitazione simulata. Utilizzerai Slow 3G per misurare il tempo di caricamento in questo codelab perché è qui che una dimensione del bundle più piccola aiuta di più.

4397cb2c1327089.png

Ora entra e inizia a migrare l'app alla nuova API modulare.

4. Utilizzare i pacchetti di compatibilità

I pacchetti di compatibilità ti consentono di eseguire l'aggiornamento alla nuova versione dell'SDK senza modificare tutto il codice Firebase contemporaneamente. Puoi aggiornarli gradualmente all'API modulare.

In questo passaggio, aggiornerai la libreria Firebase dalla v8 alla nuova versione e modificherai il codice per utilizzare i pacchetti di compatibilità. Nei passaggi seguenti imparerai come aggiornare solo il codice di autenticazione Firebase per utilizzare prima l'API modulare, quindi aggiornare il codice Firestore.

Alla fine di ogni passaggio, dovresti essere in grado di compilare ed eseguire l'app senza interruzioni e notare una diminuzione delle dimensioni del bundle durante la migrazione di ciascun prodotto.

Ottieni il nuovo SDK

Trova la sezione delle dipendenze nel package.json e sostituiscila con quanto segue:

pacchetto.json

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

Reinstallare le dipendenze

Poiché abbiamo modificato la versione della dipendenza, dobbiamo eseguire nuovamente npm install per ottenere la nuova versione della dipendenza.

Modifica i percorsi di importazione

I pacchetti di compatibilità sono esposti nel sottomodulo firebase/compat , quindi aggiorneremo di conseguenza i percorsi di importazione:

  1. Vai al file src/firebase.ts
  2. Sostituisci le importazioni esistenti con le seguenti importazioni:

src/firebase.ts

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

Verifica che l'app funzioni

  1. Esegui npm run build per ricostruire l'app.
  2. Apri una scheda del browser su http://localhost:8080 o aggiorna la scheda esistente.
  3. Gioca con l'app. Dovrebbe funzionare ancora tutto.

5. Aggiorna Auth per utilizzare l'API modulare

Puoi aggiornare i prodotti Firebase in qualsiasi ordine. In questo codelab aggiornerai prima Auth per apprendere i concetti di base perché l'API Auth è relativamente semplice. L'aggiornamento di Firestore è un po' più complicato e imparerai come farlo in seguito.

Aggiorna l'inizializzazione dell'autenticazione

  1. Vai al file src/firebase.ts
  2. Aggiungi la seguente importazione:

src/firebase.ts

import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';
  1. Elimina import 'firebase/compat/auth'.
  2. Sostituisci export const firebaseAuth = app.auth(); con:

src/firebase.ts

export const firebaseAuth = initializeAuth(app, { persistence: [indexedDBLocalPersistence] });
  1. Rimuovi export type User = firebase.User; alla fine del fascicolo. User verrà esportato direttamente in src/auth.ts che modificherai successivamente.

Aggiorna il codice di autenticazione

  1. Vai al file src/auth.ts
  2. Aggiungi le seguenti importazioni all'inizio del file:

src/auth.ts

import { 
    signInAnonymously, 
    signOut,
    onAuthStateChanged,
    User
} from 'firebase/auth';
  1. Rimuovi User import { firebaseAuth, User } from './firebase'; poiché hai già importato User da 'firebase/auth'.
  2. Aggiorna le funzioni per utilizzare l'API modulare.

Come hai già visto in precedenza quando abbiamo aggiornato l'istruzione import, i pacchetti nella versione 9 sono organizzati attorno a funzioni che puoi importare, a differenza delle API della versione 8 che sono basate su uno spazio dei nomi e un modello di servizio concatenati. È questa nuova organizzazione del codice che consente lo scuotimento del codice inutilizzato, poiché consente agli strumenti di creazione di analizzare quale codice viene utilizzato e cosa no.

Nella versione 9, i servizi vengono passati come primo argomento alle funzioni. I servizi sono gli oggetti che ottieni dall'inizializzazione di un servizio Firebase, ad esempio l'oggetto restituito da getAuth() o initializeAuth() . Mantengono lo stato di un particolare servizio Firebase e la funzione utilizza lo stato per eseguire le proprie attività. Applichiamo questo modello per implementare le seguenti funzioni:

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';

Verifica che l'app funzioni

  1. Esegui npm run build per ricostruire l'app.
  2. Apri una scheda del browser su http://localhost:8080 o aggiorna la scheda esistente
  3. Gioca con l'app. Dovrebbe funzionare ancora tutto.

Controlla la dimensione del pacchetto

  1. Apri Chrome DevTools.
  2. Passa alla scheda Rete .
  3. Aggiorna la pagina per acquisire le richieste di rete.
  4. Cerca main.js e controlla le sue dimensioni. Hai ridotto la dimensione del bundle di 100 KB (36 KB con gzip), ovvero circa il 22% in meno modificando solo poche righe di codice! Inoltre, il sito si carica 0,75 più velocemente con una connessione 3G lenta.

2e4eafaf66cd829b.png

6. Aggiorna l'app Firebase e Firestore per utilizzare l'API modulare

Aggiorna l'inizializzazione di Firebase

  1. Vai al file src/firebase.ts.
  2. Sostituisci import firebase from 'firebase/compat/app'; con:

src/firebase.ts

import { initializeApp } from 'firebase/app';
  1. Sostituisci const app = firebase.initializeApp({...}); con:

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.appspot.com", 
    messagingSenderId: "875614679042", 
    appId: "1:875614679042:web:5813c3e70a33e91ba0371b"
});

Aggiorna l'inizializzazione di Firestore

  1. Nello stesso file src/firebase.ts, sostituisci import 'firebase/compat/firestore'; con

src/firebase.ts

import { getFirestore } from 'firebase/firestore';
  1. Sostituisci export const firestore = app.firestore(); con:

src/firebase.ts

export const firestore = getFirestore();
  1. Rimuovi tutte le righe dopo " export const firestore = ... "

Aggiorna le importazioni

  1. Apri il file src/services.ts.
  2. Rimuovere FirestoreFieldPath , FirestoreFieldValue e QuerySnapshot dall'importazione. L'importazione da './firebase' ora dovrebbe assomigliare alla seguente:

src/services.ts

import { firestore } from './firebase';
  1. Importa le funzioni e i tipi che utilizzerai nella parte superiore del file:
    **src/services.ts**

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove, 
    onSnapshot, 
    query, 
    where, 
    documentId, 
    QuerySnapshot
} from 'firebase/firestore';
  1. Crea un riferimento alla raccolta che contiene tutti i ticker:

src/services.ts

const tickersCollRef = collection(firestore, 'current');
  1. Utilizza getDocs() per recuperare tutti i documenti dalla raccolta:

src/services.ts

const tickers = await getDocs(tickersCollRef);

Vedi search() per il codice finito.

Aggiorna addToWatchList()

Utilizza doc() per creare un riferimento al documento alla watchlist dell'utente, quindi aggiungi un ticker utilizzando setDoc() con arrayUnion() :

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 });
}

Aggiorna deleteFromWatchList()

Allo stesso modo, rimuovi un ticker dalla watchlist dell'utente utilizzando setDoc() con arrayRemove() :

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 });
}

Aggiorna iscriviti a TickerChanges()

  1. Utilizza doc() per creare prima un riferimento al documento alla watchlist dell'utente, quindi ascolta le modifiche alla watchlist utilizzando onSnapshot() :

src/services.ts

const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
const unsubscribe = onSnapshot(watchlistRef, snapshot => {
   /* subscribe to ticker price changes */
});
  1. Una volta che hai i ticker nella watchlist, usa query() per creare una query per recuperare i loro prezzi e usa onSnapshot() per ascoltare le loro variazioni di prezzo:

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);
  });

Vedi SubscribeToTickerChanges() per l'implementazione completa.

Aggiorna iscriviti a AllTickerChanges()

Per prima cosa utilizzerai collection() per creare un riferimento alla raccolta che contiene i prezzi per tutti i ticker, quindi utilizzerai onSnapshot() per ascoltare le variazioni di prezzo:

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);
   });
}

Verifica che l'app funzioni

  1. Esegui npm run build per ricostruire l'app.
  2. Apri una scheda del browser su http://localhost:8080 o aggiorna la scheda esistente
  3. Gioca con l'app. Dovrebbe funzionare ancora tutto.

Controlla la dimensione del pacchetto

  1. Apri Chrome DevTools.
  2. Passa alla scheda Rete .
  3. Aggiorna la pagina per acquisire le richieste di rete.
  4. Cerca main.js e controlla le sue dimensioni. Confrontalo nuovamente con la dimensione del pacchetto originale: abbiamo ridotto la dimensione del pacchetto di oltre 200 KB (63,8 KB con gzip) o più piccola del 50%, il che si traduce in un tempo di caricamento più veloce di 1,3 secondi!

7660cdc574ee8571.png

7. Utilizza Firestore Lite per accelerare il rendering della pagina iniziale

Cos'è Firestore Lite?

L'SDK Firestore offre caching complesso, streaming in tempo reale, archiviazione persistente, sincronizzazione offline multi-scheda, tentativi, concorrenza ottimistica e molto altro ancora, e quindi ha dimensioni piuttosto grandi. Ma potresti semplicemente voler ottenere i dati una volta, senza bisogno di alcuna funzionalità avanzata. Per questi casi, Firestore ha creato una soluzione semplice e leggera, un pacchetto completamente nuovo: Firestore Lite.

Un ottimo caso d'uso per Firestore Lite è l'ottimizzazione delle prestazioni del rendering della pagina iniziale, in cui è sufficiente sapere se un utente ha effettuato o meno l'accesso, quindi leggere alcuni dati da Firetore per visualizzarli.

In questo passaggio imparerai come utilizzare Firestore lite per ridurre le dimensioni del pacchetto per accelerare il rendering della pagina iniziale, quindi caricare dinamicamente l'SDK principale di Firestore per iscriverti agli aggiornamenti in tempo reale.

Effettuerai il refactoring del codice in:

  1. Sposta i servizi in tempo reale in un file separato, in modo che possano essere caricati dinamicamente utilizzando l'importazione dinamica.
  2. Crea nuove funzioni per utilizzare Firestore Lite per recuperare watchlist e prezzi delle azioni.
  3. Utilizza le nuove funzioni Firestore Lite per recuperare i dati per effettuare il rendering della pagina iniziale, quindi caricare dinamicamente i servizi in tempo reale per ascoltare gli aggiornamenti in tempo reale.

Sposta i servizi in tempo reale in un nuovo file

  1. Crea un nuovo file chiamato src/services.realtime.ts.
  2. Sposta le funzioni subscribeToTickerChanges() e subscribeToAllTickerChanges() da src/services.ts nel nuovo file.
  3. Aggiungi le importazioni necessarie all'inizio del nuovo file.

Devi ancora apportare un paio di modifiche qui:

  1. Innanzitutto, crea un'istanza Firestore dall'SDK Firestore principale nella parte superiore del file da utilizzare nelle funzioni. Non puoi importare l'istanza Firestore da firebase.ts qui perché la modificherai in un'istanza Firestore Lite in pochi passaggi, che verrà utilizzata solo per il rendering della pagina iniziale.
  2. In secondo luogo, eliminare la variabile firstload e il blocco if da essa protetto. Le loro funzionalità verranno spostate in nuove funzioni che creerai nel passaggio successivo.

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);
   });
}

Utilizza Firestore lite per recuperare i dati

  1. Apri src/services.ts.
  2. Cambia il percorso di importazione da 'firebase/firestore' a 'firebase/firestore/lite', aggiungi getDoc e rimuovi onSnapshot dall'elenco di importazione :

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';
  1. Aggiungi funzioni per recuperare i dati necessari per il rendering della pagina iniziale utilizzando Firestore Lite:

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);
}
  1. Apri src/firebase.ts e modifica il percorso di importazione da 'firebase/firestore' a 'firebase/firestore/lite':

src/firebase.ts

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

Legateli tutti insieme

  1. Apri src/main.ts.
  2. Avrai bisogno delle funzioni appena create per recuperare i dati per il rendering della pagina iniziale e un paio di funzioni di supporto per gestire lo stato dell'app. Quindi ora aggiorna le importazioni:

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';
  1. Carica src/services.realtime utilizzando un'importazione dinamica nella parte superiore del file. La variabile loadRealtimeService è una promessa che si risolverà con i servizi in tempo reale una volta caricato il codice. Lo utilizzerai in seguito per iscriverti agli aggiornamenti in tempo reale.

src/main.ts

const loadRealtimeService = import('./services.realtime');
loadRealtimeService.then(() => {
   setRealtimeServicesLoaded(true);
});
  1. Cambia il callback di onUserChange() in una funzione async , in modo da poter utilizzare await nel corpo della funzione:

src/main.ts

onUserChange(async user => {
 // callback body
});
  1. Ora recupera i dati per eseguire il rendering della pagina iniziale utilizzando le nuove funzioni che abbiamo creato nel passaggio precedente.

Nel callback onUserChange() , trova la condizione if in cui un utente ha effettuato l'accesso e copia e incolla il codice all'interno dell'istruzione if:

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   
   }
}
  1. Nel blocco else in cui nessun utente ha effettuato l'accesso, recupera le informazioni sui prezzi per tutte le azioni utilizzando Firestore Lite, visualizza la pagina, quindi ascolta le variazioni di prezzo una volta caricati i servizi in tempo reale:

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 })
       });
   });
}

Vedi src/main.ts per il codice finito.

Verifica che l'app funzioni

  1. Esegui npm run build per ricostruire l'app.
  2. Apri una scheda del browser su http://localhost:8080 o aggiorna la scheda esistente.

Controlla la dimensione del pacchetto

  1. Apri Chrome Devtools.
  2. Passa alla scheda Rete .
  3. Aggiorna la pagina per acquisire le richieste di rete
  4. Cerca main.js e controlla le sue dimensioni.
  5. Ora sono solo 115 KB (34,5 KB compressi con gzip). Si tratta di un valore inferiore del 75% rispetto alla dimensione del pacchetto originale che era di 446 KB (138 KB compressi con gzip)! Di conseguenza, il sito si carica più di 2 secondi più velocemente con la connessione 3G: un ottimo miglioramento delle prestazioni e dell'esperienza utente!

9ea7398a8c8ef81b.png

8. Congratulazioni

Congratulazioni, hai aggiornato con successo l'app rendendola più piccola e più veloce!

Hai utilizzato i pacchetti compat per aggiornare l'app pezzo per pezzo e hai utilizzato Firestore Lite per accelerare il rendering della pagina iniziale, quindi caricare dinamicamente il Firestore principale per trasmettere in streaming le variazioni di prezzo.

Hai anche ridotto le dimensioni del bundle e migliorato il tempo di caricamento nel corso di questo codelab:

main.js

dimensione della risorsa (kb)

dimensione gzip (kb)

tempo di caricamento (s) (oltre 3g lenti)

v8

446

138

4.92

compatibilità v9

429

124

4.65

v9 solo modulare Aut

348

102

4.2

v9 completamente modulare

244

74.6

3.66

v9 completamente modulare + Firestore lite

117

34.9

2.88

32a71bd5a774e035.png

Ora conosci i passaggi chiave necessari per aggiornare un'app Web che utilizza l'SDK JS Firebase v8 per utilizzare il nuovo SDK JS modulare.

Ulteriori letture

Documenti di riferimento