דף זה תורגם על ידי Cloud Translation API.

הטעינו את אפליקציית האינטרנט שלכם על ידי מעבר ל-Firebase JS SDK המודולרי

1. לפני שמתחילים

Firebase JS SDK המודולרי הוא שכתוב של ה-JS SDK הקיים וישוחרר כגרסה העיקרית הבאה. זה מאפשר למפתחים לא לכלול קוד שאינו בשימוש מ-Firebase JS SDK כדי ליצור חבילות קטנות יותר ולהשיג ביצועים טובים יותר.

ההבדל הבולט ביותר ב-JS SDK המודולרי הוא שהתכונות מאורגנות כעת בפונקציות צפות בחינם שתייבא, בניגוד למרחב שמות יחיד firebase הכולל הכל. דרך חדשה זו של ארגון קוד היא המאפשרת ניעור עצים, ותלמדו כיצד לשדרג כל אפליקציה המשתמשת כעת ב-v8 Firebase JS SDK למודולרית החדשה.

כדי לספק תהליך שדרוג חלק, מסופקת סט של חבילות תאימות. ב-codelab זה, תלמד כיצד להשתמש בחבילות התאימות כדי להעביר את האפליקציה חלק אחר חלק.

מה שתבנה

במעבדת הקוד הזה, אתה הולך להעביר בהדרגה אפליקציית אינטרנט קיימת של רשימת מעקב שמשתמשת ב-v8 JS SDK ל-JS SDK המודולרי החדש בשלושה שלבים:

שדרג את האפליקציה כדי להשתמש בחבילות התאימות
שדרג את האפליקציה מחבילות התאימות ל-API המודולרי חלק אחר חלק
השתמש ב-Firestore Lite, יישום קל משקל של Firestore SDK, כדי לשפר עוד יותר את ביצועי האפליקציה

מעבדת קוד זה מתמקדת בשדרוג ה-SDK של Firebase. מושגים ובלוקי קוד אחרים מועלים ומסופקים לך פשוט להעתיק ולהדביק.

מה אתה צריך

דפדפן לבחירתך, כגון Chrome
עורך ה-IDE/טקסט לבחירתך, כגון WebStorm , Atom , Sublime או VS Code
מנהל החבילות npm , שמגיע בדרך כלל עם Node.js
הקוד לדוגמה של מעבדת הקוד (ראה את השלב הבא של מעבדת הקוד כדי לקבל את הקוד.)

2. תתכוננו

קבל את הקוד

כל מה שאתה צריך עבור הפרויקט הזה נמצא ב- Git repo. כדי להתחיל, תצטרך לתפוס את הקוד ולפתוח אותו בסביבת הפיתוח המועדפת עליך.

שיבוט את מאגר Github של Codelab משורת הפקודה:

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

לחלופין, אם לא התקנת git, אתה יכול להוריד את המאגר כקובץ ZIP ולפרוק את קובץ ה-zip שהורדת.

ייבא את האפליקציה

באמצעות ה-IDE שלך, פתח או ייבא את ספריית codelab-modular-sdk .
הפעל npm install כדי להתקין את התלות הנדרשת לבנייה ולהפעיל את האפליקציה באופן מקומי.
הפעל npm run build כדי לבנות את האפליקציה.
הפעל npm run serve כדי להפעיל את שרת האינטרנט
פתח כרטיסיית דפדפן אל http://localhost:8080

3. קבע קו בסיס

מהי נקודת המוצא שלך?

נקודת המוצא שלך היא אפליקציית רשימת צפייה במניות המיועדת עבור מעבדת קוד זה. הקוד פושט כדי להמחיש את המושגים במעבדת קוד זה, ויש לו מעט טיפול בשגיאות. אם תבחר לעשות שימוש חוזר בקוד זה באפליקציית ייצור, וודא שאתה מטפל בכל השגיאות ובודק במלואו את כל הקוד.

ודא שהכל עובד באפליקציה:

היכנס באופן אנונימי באמצעות כפתור הכניסה בפינה הימנית העליונה.
לאחר הכניסה, חפש והוסף "NFLX", "SBUX" ו-"T" לרשימת המעקב על ידי לחיצה על כפתור הוסף , הקלדת האותיות ולחיצה על שורת תוצאות החיפוש שצצה למטה.
הסר מניה מרשימת המעקב על ידי לחיצה על האיקס בסוף השורה.
צפו בעדכונים בזמן אמת למחיר המניה.
פתח את Chrome DevTools, עבור לכרטיסייה רשת וסמן את השבת מטמון ושימוש בשורות בקשות גדולות . השבתת מטמון מוודאת שתמיד נקבל את השינויים העדכניים ביותר לאחר רענון ושימוש בשורות בקשה גדולה גורם לשורה להציג גם את הגודל המועבר וגם את גודל המשאב עבור משאב. בקוד מעבד זה, אנו מתעניינים בעיקר בגודל של main.js .

טען את האפליקציה בתנאי רשת שונים באמצעות מצערת מדומה. אתה תשתמש ב-Slow 3G כדי למדוד את זמן הטעינה במעבדת הקוד הזה, כי זה המקום שבו גודל צרור קטן יותר עוזר הכי הרבה.

עכשיו קפצו והתחל להעביר את האפליקציה ל-API המודולרי החדש.

4. השתמש בחבילות התאימות

חבילות התאימות מאפשרות לך לשדרג לגרסת ה-SDK החדשה מבלי לשנות את כל קוד Firebase בבת אחת. אתה יכול לשדרג אותם ל-API המודולרי בהדרגה.

בשלב זה תשדרגו את ספריית Firebase מ-v8 לגרסה החדשה ותשנה את הקוד לשימוש בחבילות התאימות. בשלבים הבאים, תלמד כיצד לשדרג רק את קוד האימות של Firebase לשימוש תחילה ב-API המודולרי, ולאחר מכן לשדרג את קוד Firestore.

בסוף כל שלב, אתה אמור להיות מסוגל להרכיב ולהפעיל את האפליקציה ללא שבירה, ולראות ירידה בגודל החבילה ככל שאנו מעבירים כל מוצר.

קבל את ה-SDK החדש

מצא את סעיף התלות ב- package.json והחלף אותו בסעיף הבא:

package.json

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

התקן מחדש את התלות

מכיוון ששינינו את גרסת התלות, עלינו להפעיל מחדש npm install כדי לקבל את הגרסה החדשה של התלות.

שנה נתיבי ייבוא

חבילות התאימות נחשפות תחת תת-מודול firebase/compat , ולכן נעדכן את נתיבי הייבוא בהתאם:

עבור לקובץ src/firebase.ts
החלף את הייבוא הקיים בייבוא הבא:

src/firebase.ts

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

ודא שהאפליקציה עובדת

הפעל npm run build כדי לבנות מחדש את האפליקציה.
פתח כרטיסיית דפדפן אל http://localhost:8080 , או רענן את הכרטיסייה הקיימת.
שחקו עם האפליקציה. הכל עדיין אמור לעבוד.

5. שדרג את Auth לשימוש ב-API המודולרי

אתה יכול לשדרג את מוצרי Firebase בכל סדר. במעבדת הקוד הזה, תחילה תשדרג את Auth כדי ללמוד את המושגים הבסיסיים מכיוון ש-Auth API פשוט יחסית. שדרוג Firestore הוא קצת יותר כרוך, ובהמשך תלמד כיצד לעשות זאת.

עדכן אתחול של Auth

עבור לקובץ src/firebase.ts
הוסף את הייבוא הבא:

src/firebase.ts

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

מחק import 'firebase/compat/auth'.
החלף export const firebaseAuth = app.auth(); עם:

src/firebase.ts

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

הסר export type User = firebase.User; בסוף הקובץ. User ייוצא ישירות ב- src/auth.ts אותו תשנה לאחר מכן.

עדכן קוד אישור

עבור לקובץ src/auth.ts
הוסף את הייבוא הבא לראש הקובץ:

src/auth.ts

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

הסר User import { firebaseAuth, User } from './firebase'; מכיוון שכבר ייבאת User מ- 'firebase/auth'.
עדכן פונקציות לשימוש ב-API המודולרי.

כפי שכבר ראיתם קודם לכן כאשר עדכנו את הצהרת הייבוא, חבילות בגרסה 9 מאורגנות סביב פונקציות שניתן לייבא, בניגוד לממשקי ה-API של גרסה 8 שמבוססים על מרחב שמות ודפוס שירות משורשר נקודות. הארגון החדש הזה של הקוד הוא שמאפשר לנער קוד לא בשימוש בעץ, מכיוון שהוא מאפשר לבנות כלים לנתח באיזה קוד נעשה שימוש ומה לא.

בגרסה 9, השירותים מועברים כארגומנט הראשון לפונקציות. שירותים הם האובייקטים שאתה מקבל מאתחול שירות Firebase, למשל האובייקט המוחזר מ- getAuth() או initializeAuth() . הם מחזיקים במצב של שירות Firebase מסוים, והפונקציה משתמשת במדינה כדי לבצע את המשימות שלה. הבה ניישם דפוס זה כדי ליישם את הפונקציות הבאות:

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

ודא שהאפליקציה עובדת

הפעל npm run build כדי לבנות מחדש את האפליקציה.
פתח כרטיסיית דפדפן אל http://localhost:8080 , או רענן את הכרטיסייה הקיימת
שחקו עם האפליקציה. הכל עדיין אמור לעבוד.

בדוק את גודל החבילה

פתח את Chrome DevTools.
עבור ללשונית רשת .
רענן את הדף כדי ללכוד בקשות רשת.
חפש את main.js ובדוק את הגודל שלו. הקטנת את גודל החבילה ב-100KB (36 KB gzipped), או קטן בכ-22% על ידי שינוי רק כמה שורות קוד! האתר גם טוען 0.75 שניות מהר יותר בחיבור איטי של 3G.

6. שדרג את אפליקציית Firebase ו-Firestore כדי להשתמש ב-API המודולרי

עדכן את האתחול של Firebase

עבור לקובץ src/firebase.ts.
החלף import firebase from 'firebase/compat/app'; עם:

src/firebase.ts

import { initializeApp } from 'firebase/app';

Replace const app = firebase.initializeApp({...}); עם:

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

עדכון אתחול Firestore

באותו קובץ src/firebase.ts, החלף import 'firebase/compat/firestore'; עם

src/firebase.ts

import { getFirestore } from 'firebase/firestore';

החלף export const firestore = app.firestore(); עם:

src/firebase.ts

export const firestore = getFirestore();

הסר את כל השורות אחרי " export const firestore = ... "

עדכן יבוא

פתח את הקובץ src/services.ts.
הסר את FirestoreFieldPath , FirestoreFieldValue ו- QuerySnapshot מהייבוא. הייבוא מ './firebase' אמור כעת להיראות כך:

src/services.ts

import { firestore } from './firebase';

ייבא את הפונקציות והסוגים שבהם אתה הולך להשתמש בחלק העליון של הקובץ:

    **src/services.ts**

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

עדכן את החיפוש()

צור הפניה לאוסף שמכיל את כל הטיקרים:

src/services.ts

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

השתמש getDocs() כדי להביא את כל המסמכים מהאוסף:

src/services.ts

const tickers = await getDocs(tickersCollRef);

ראה search() עבור הקוד המוגמר.

עדכן addToWatchList()

השתמש ב- doc() כדי ליצור הפניה למסמך לרשימת המעקב של המשתמש, ולאחר מכן הוסף לו טיקר באמצעות setDoc() עם 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 });
}

עדכן deleteFromWatchList()

באופן דומה, הסר טיקר מרשימת המעקב של המשתמש באמצעות setDoc() עם 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 });
}

עדכן subscribeToTickerChanges()

השתמש doc() כדי ליצור הפניה למסמך לרשימת המעקב של המשתמש תחילה, ולאחר מכן האזן לשינויים ברשימת המעקב באמצעות onSnapshot() :

src/services.ts

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

ברגע שיש לך את הטיקרים ברשימת המעקב, השתמש query() כדי ליצור שאילתה כדי להביא את המחירים שלהם והשתמש onSnapshot() כדי להאזין לשינויי המחירים שלהם:

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

ראה subscribeToTickerChanges() ליישום המלא.

עדכן subscribeToAllTickerChanges()

תחילה תשתמש ב- collection() כדי ליצור הפניה לאוסף שמכיל תחילה מחירים עבור כל הטיקרים, ולאחר מכן השתמש onSnapshot() כדי להאזין לשינויים במחיר:

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

ודא שהאפליקציה עובדת

הפעל npm run build כדי לבנות מחדש את האפליקציה.
פתח כרטיסיית דפדפן אל http://localhost:8080 , או רענן את הכרטיסייה הקיימת
שחקו עם האפליקציה. הכל עדיין אמור לעבוד.

בדוק את גודל החבילה

פתח את Chrome DevTools.
עבור ללשונית רשת .
רענן את הדף כדי ללכוד בקשות רשת.
חפש את main.js ובדוק את הגודל שלו. השווה אותו שוב לגודל החבילה המקורית - הקטנו את גודל החבילה ביותר מ-200KB (63.8 KB ב-gzipped), או קטן ב-50%, מה שמתורגם לזמן טעינה מהיר יותר ב-1.3 שניות!

7. השתמש ב-Firestore Lite כדי להאיץ את עיבוד העמודים הראשוני

מה זה Firestore Lite?

ה-SDK של Firestore מציע אחסון במטמון מורכב, סטרימינג בזמן אמת, אחסון מתמשך, סנכרון לא מקוון מרובה כרטיסיות, ניסיונות חוזרים, במקביליות אופטימית ועוד הרבה יותר, ולכן הוא די גדול בגודלו. אבל אולי תרצה פשוט לקבל את הנתונים פעם אחת, מבלי להזדקק לאף אחת מהתכונות המתקדמות. עבור המקרים האלה, Firestore יצרה פתרון פשוט וקל, חבילה חדשה לגמרי - Firestore Lite.

מקרה שימוש נהדר אחד עבור Firestore Lite הוא אופטימיזציה של הביצועים של עיבוד העמודים הראשוני, שבו אתה רק צריך לדעת אם משתמש מחובר או לא, ולאחר מכן לקרוא כמה נתונים מ-Firetore כדי להציג.

בשלב זה, תלמד כיצד להשתמש ב-Firestore lite כדי להקטין את גודל החבילה כדי להאיץ את עיבוד העמודים הראשוני, ולאחר מכן לטעון את ה-SDK הראשי של Firestore באופן דינמי כדי להירשם לעדכונים בזמן אמת.

אתה תשנה את הקוד ל:

העבר שירותי זמן אמת לקובץ נפרד, כך שניתן יהיה לטעון אותם באופן דינמי באמצעות ייבוא דינמי.
צור פונקציות חדשות כדי להשתמש ב-Firestore Lite כדי לאחזר את רשימת המעקב ומחירי המניות.
השתמש בפונקציות החדשות של Firestore Lite כדי לאחזר נתונים כדי לבצע את עיבוד העמודים הראשוני, ולאחר מכן טען באופן דינמי את שירותי בזמן אמת כדי להאזין לעדכונים בזמן אמת.

העבר שירותים בזמן אמת לקובץ חדש

צור קובץ חדש בשם src/services.realtime.ts.
העבר את הפונקציות subscribeToTickerChanges() ו- subscribeToAllTickerChanges() מ- src/services.ts לקובץ החדש.
הוסף ייבוא נחוץ לראש הקובץ החדש.

אתה עדיין צריך לבצע כמה שינויים כאן:

ראשית, צור מופע של Firestore מה-SDK הראשי של Firestore בחלק העליון של הקובץ לשימוש בפונקציות. אינך יכול לייבא את מופע Firestore מ- firebase.ts לכאן מכיוון שאתה עומד לשנות אותו למופע של Firestore Lite במספר שלבים, שישמש רק עבור עיבוד העמודים הראשוני.
שנית, היפטר מהמשתנה firstload ומגוש ה-if שנשמר על ידו. הפונקציות שלהם יועברו לפונקציות חדשות שתיצור בשלב הבא.

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

השתמש ב-Firestore lite כדי להביא נתונים

פתח את src/services.ts.
שנה את נתיב הייבוא מ- 'firebase/firestore' ל- 'firebase/firestore/lite', הוסף getDoc והסר את onSnapshot מרשימת הייבוא :

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

הוסף פונקציות כדי להביא נתונים הדרושים לעיבוד העמוד הראשוני באמצעות 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);
}

פתח את src/firebase.ts ושנה את נתיב הייבוא מ- 'firebase/firestore' ל- 'firebase/firestore/lite':

src/firebase.ts

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

קשרו את כולם יחד

פתח את src/main.ts.
תזדקק לפונקציות החדשות שנוצרו כדי להביא נתונים לעיבוד העמוד הראשוני, ולכמה פונקציות מסייעות כדי לנהל את מצב האפליקציה. אז עכשיו עדכן את הייבוא:

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

טען src/services.realtime באמצעות ייבוא דינמי בחלק העליון של הקובץ. Variable loadRealtimeService היא הבטחה שתיפתר עם שירותי בזמן אמת לאחר טעינת הקוד. אתה תשתמש בו מאוחר יותר כדי להירשם לעדכונים בזמן אמת.

src/main.ts

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

שנה את ה-callback של onUserChange() לפונקציה async , כך שנוכל להשתמש await בגוף הפונקציה:

src/main.ts

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

כעת אחזר את הנתונים כדי לבצע את עיבוד העמוד הראשוני באמצעות הפונקציות החדשות שיצרנו בשלב הקודם.

ב- onUserChange() callback, מצא את התנאי if שבו משתמש מחובר, והעתק והדבק את הקוד בתוך המשפט 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   
   }
}

בבלוק אחר שבו אף משתמש לא מחובר, אחזר את פרטי המחיר עבור כל המניות באמצעות Firestore lite, עבד את הדף, ואז האזן לשינויי המחיר לאחר טעינת שירותי בזמן אמת:

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

ראה src/main.ts עבור הקוד המוגמר.

ודא שהאפליקציה עובדת

הפעל npm run build כדי לבנות מחדש את האפליקציה.
פתח כרטיסיית דפדפן אל http://localhost:8080 , או רענן את הכרטיסייה הקיימת.

בדוק את גודל החבילה

פתח את Chrome Devtools.
עבור ללשונית רשת .
רענן את הדף כדי ללכוד בקשות רשת
חפש את main.js ובדוק את הגודל שלו.
עכשיו זה רק 115KB (34.5KB gzipped). זה קטן ב-75% מגודל החבילה המקורי שהיה 446KB (138KB gzipped)! כתוצאה מכך, האתר נטען מעל 2 שניות מהר יותר בחיבור 3G - שיפור ביצועים וחוויית משתמש נהדרים!

8. מזל טוב

מזל טוב, שדרגת את האפליקציה בהצלחה והפכת אותה לקטנה ומהירה יותר!

השתמשת בחבילות ה-compat כדי לשדרג את האפליקציה חלק אחר חלק, והשתמשת ב-Firestore Lite כדי להאיץ את עיבוד העמודים הראשוני, ואז טען באופן דינמי את Firestore הראשי כדי להזרים שינויים במחיר.

הקטנת גם את גודל החבילה ושיפרת את זמן הטעינה שלו במהלך מעבדת הקוד הזה:

main.js	גודל משאב (kb)	גודל gziped (kb)	זמן טעינה (שניות) (מעל 3 גרם איטי)
v8	446	138	4.92
v9 compat	429	124	4.65
אימות מודולרי בלבד v9	348	102	4.2
v9 מודולרי לחלוטין	244	74.6	3.66
v9 מודולרי מלא + Firestore lite	117	34.9	2.88

כעת אתה יודע את השלבים העיקריים הנדרשים לשדרוג אפליקציית אינטרנט המשתמשת ב-v8 Firebase JS SDK לשימוש ב-JS SDK המודולרי החדש.

לקריאה נוספת

מסמכי עזר

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