Усовершенствуйте свое веб-приложение, перейдя на модульный Firebase JS SDK.

1. Прежде чем начать

Модульный Firebase JS SDK представляет собой переработку существующего JS SDK и будет выпущен в качестве следующей основной версии. Это позволяет разработчикам исключать неиспользуемый код из Firebase JS SDK, чтобы создавать меньшие пакеты и достигать большей производительности.

Наиболее заметное отличие в модульном JS SDK заключается в том, что функции теперь организованы в свободно плавающие функции, которые вы импортируете, а не в одно пространство имен firebase , которое включает в себя все. Этот новый способ организации кода позволяет выполнять встряхивание дерева, и вы узнаете, как обновить любое приложение, в настоящее время использующее Firebase JS SDK v8, до нового модульного приложения.

Чтобы обеспечить плавный процесс обновления, предоставляется набор пакетов совместимости. В этой лабораторной работе вы узнаете, как использовать пакеты совместимости для поэтапного переноса приложения.

Что ты построишь

В этой лабораторной работе вы собираетесь постепенно перенести существующее веб-приложение с контрольным списком акций, использующее JS SDK версии 8, на новый модульный JS SDK в три этапа:

• Обновите приложение, чтобы использовать пакеты совместимости.
• По частям обновите приложение из пакетов совместимости до модульного API.
• Используйте Firestore Lite, облегченную реализацию Firestore SDK, чтобы еще больше повысить производительность приложения.

Эта лаборатория кода ориентирована на обновление Firebase SDK. Другие концепции и блоки кода не упоминаются и предоставляются для простого копирования и вставки.

Что вам понадобится

• Браузер по вашему выбору, например Chrome.
• IDE/текстовый редактор по вашему выбору, например WebStorm , Atom , Sublime или VS Code.
• Менеджер пакетов npm , который обычно поставляется с Node.js.
• Пример кода лаборатории кода (см. следующий шаг лаборатории кода, чтобы узнать, как получить код).

2. Настройте

Получить код

Все, что вам нужно для этого проекта, находится в репозитории Git. Чтобы начать, вам нужно взять код и открыть его в вашей любимой среде разработки.

Клонируйте репозиторий Codelab на Github из командной строки:

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

Альтернативно, если у вас не установлен git, вы можете загрузить репозиторий в виде ZIP-файла и распаковать загруженный zip-файл.

Импортируйте приложение

1. Используя вашу IDE, откройте или импортируйте каталог codelab-modular-sdk .
2. Запустите npm install , чтобы установить зависимости, необходимые для сборки и локального запуска приложения.
3. Запустите npm run build , чтобы собрать приложение.
4. Запустите npm run serve , чтобы запустить веб-сервер.
5. Откройте вкладку браузера по адресу http://localhost:8080.

3. Установите базовый уровень

Какова ваша отправная точка?

Ваша отправная точка — приложение со списком акций, разработанное для этой лаборатории. Код был упрощен, чтобы проиллюстрировать концепции этой лаборатории кода, и в нем мало обработки ошибок. Если вы решите повторно использовать какой-либо из этих кодов в рабочем приложении, убедитесь, что вы обрабатываете все ошибки и полностью тестируете весь код.

Убедитесь, что в приложении все работает:

1. Войдите анонимно, используя кнопку входа в правом верхнем углу.
2. После входа в систему найдите и добавьте «NFLX», «SBUX» и «T» в список наблюдения, нажав кнопку «Добавить », введя буквы и щелкнув строку результатов поиска, которая появляется ниже.
3. Удалите акцию из списка наблюдения, нажав x в конце строки.
4. Следите за обновлениями цен на акции в режиме реального времени.
5. Откройте Chrome DevTools, перейдите на вкладку «Сеть» и отметьте «Отключить кеш» и «Использовать большие строки запросов» . Отключение кэша гарантирует, что мы всегда получаем самые последние изменения после обновления, а параметр «Использовать большие строки запроса» заставляет строку отображать как переданный размер, так и размер ресурса для ресурса. В этой кодовой лаборатории нас главным образом интересует размер main.js

6. Загружайте приложение в различных сетевых условиях, используя имитацию регулирования. Вы будете использовать Slow 3G для измерения времени загрузки в этой лаборатории кода, поскольку именно здесь меньший размер пакета помогает больше всего.

Теперь приступайте к переносу приложения на новый модульный API.

4. Используйте пакеты совместимости.

Пакеты совместимости позволяют вам перейти на новую версию SDK, не меняя сразу весь код Firebase. Вы можете постепенно обновлять их до модульного API.

На этом этапе вы обновите библиотеку Firebase с версии 8 до новой версии и измените код для использования пакетов совместимости. На следующих шагах вы узнаете, как обновить только код аутентификации Firebase, чтобы сначала использовать модульный API, а затем обновить код Firestore.

В конце каждого шага вы сможете скомпилировать и запустить приложение без сбоев и увидеть уменьшение размера пакета по мере миграции каждого продукта.

Получите новый SDK

Найдите раздел зависимостей в package.json и замените его следующим:

пакет.json

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

Переустановите зависимости

Поскольку мы изменили версию зависимости, нам нужно перезапустить npm install , чтобы получить новую версию зависимости.

Изменить пути импорта

Пакеты совместимости доступны в подмодуле firebase/compat , поэтому мы соответствующим образом обновим пути импорта:

1. Перейдите в файл src/firebase.ts
2. Замените существующий импорт следующим импортом:

src/firebase.ts

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

Убедитесь, что приложение работает

1. Запустите npm run build , чтобы пересобрать приложение.
2. Откройте вкладку браузера по адресу http://localhost:8080 или обновите существующую вкладку.
3. Поиграйте с приложением. Все по-прежнему должно работать.

5. Обновите Auth, чтобы использовать модульный API.

Вы можете обновлять продукты Firebase в любом порядке. В этой лабораторной работе вы сначала обновите Auth, чтобы изучить основные понятия, поскольку API Auth относительно прост. Обновление Firestore немного сложнее, и вы узнаете, как это сделать дальше.

Обновить инициализацию аутентификации

1. Перейдите в файл src/firebase.ts
2. Добавьте следующий импорт:

src/firebase.ts

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

3. Удалить import 'firebase/compat/auth'.
4. Замените export const firebaseAuth = app.auth(); с:

src/firebase.ts

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

5. Удалить export type User = firebase.User; в конце файла. User будет напрямую экспортирован в src/auth.ts , который вы измените дальше.

Обновить код авторизации

1. Перейдите в файл src/auth.ts
2. Добавьте следующий импорт в начало файла:

источник/auth.ts

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

3. Удалить User из import { firebaseAuth, User } from './firebase'; поскольку вы уже импортировали User из 'firebase/auth'.
4. Обновите функции для использования модульного API.

Как вы уже видели ранее, когда мы обновили оператор импорта, пакеты в версии 9 организованы вокруг функций, которые вы можете импортировать, в отличие от API версии 8, которые основаны на пространстве имен с точечной цепочкой и шаблоне служб. Именно эта новая организация кода позволяет встряхивать дерево неиспользуемого кода, поскольку позволяет инструментам сборки анализировать, какой код используется, а какой нет.

В версии 9 службы передаются в качестве первого аргумента функции. Службы — это объекты, которые вы получаете при инициализации службы Firebase, например объект, возвращаемый функцией getAuth() или initializeAuth() . Они хранят состояние определенного сервиса Firebase, и функция использует это состояние для выполнения своих задач. Давайте применим этот шаблон для реализации следующих функций:

источник/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';

Убедитесь, что приложение работает

1. Запустите npm run build , чтобы пересобрать приложение.
2. Откройте вкладку браузера по адресу http://localhost:8080 или обновите существующую вкладку.
3. Поиграйте с приложением. Все по-прежнему должно работать.

Проверьте размер пакета

1. Откройте Инструменты разработчика Chrome.
2. Перейдите на вкладку «Сеть» .
3. Обновите страницу, чтобы перехватить сетевые запросы.
4. Найдите main.js и проверьте его размер. Вы уменьшили размер пакета на 100 КБ (36 КБ в сжатом виде gzip) или примерно на 22 % меньше, изменив всего лишь несколько строк кода! Сайт также загружается на 0,75 секунды быстрее при медленном соединении 3G.

6. Обновите приложение Firebase и Firestore, чтобы использовать модульный API.

Обновить инициализацию Firebase

1. Перейдите в файл src/firebase.ts.
2. Замените import firebase from 'firebase/compat/app'; с:

src/firebase.ts

import { initializeApp } from 'firebase/app';

3. Замените 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

1. В том же файле src/firebase.ts, замените import 'firebase/compat/firestore'; с

src/firebase.ts

import { getFirestore } from 'firebase/firestore';

2. Замените export const firestore = app.firestore(); с:

src/firebase.ts

export const firestore = getFirestore();

3. Удалите все строки после « export const firestore = ... »

Обновить импорт

1. Откройте файл src/services.ts.
2. Удалите FirestoreFieldPath , FirestoreFieldValue и QuerySnapshot из импорта. Импорт из './firebase' теперь должен выглядеть следующим образом:

src/services.ts

import { firestore } from './firebase';

3. Импортируйте функции и типы, которые вы собираетесь использовать, в начало файла:

    **src/services.ts**

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

Обновить поиск()

1. Создайте ссылку на коллекцию, содержащую все тикеры:

src/services.ts

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

2. Используйте 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 });
}

Обновить подпискуToTickerChanges()

1. Используйте doc() , чтобы сначала создать ссылку на документ в списке наблюдения пользователя, а затем прослушивать изменения списка наблюдения с помощью onSnapshot() :

src/services.ts

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

2. Когда тикеры появятся в списке наблюдения, используйте 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() для полной реализации.

Обновить подпискуToAllTickerChanges()

Сначала вы будете использовать 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);
   });
}

Убедитесь, что приложение работает

1. Запустите npm run build , чтобы пересобрать приложение.
2. Откройте вкладку браузера по адресу http://localhost:8080 или обновите существующую вкладку.
3. Поиграйте с приложением. Все по-прежнему должно работать.

Проверьте размер пакета

1. Откройте Инструменты разработчика Chrome.
2. Перейдите на вкладку «Сеть» .
3. Обновите страницу, чтобы перехватить сетевые запросы.
4. Найдите main.js и проверьте его размер. Еще раз сравните его с исходным размером пакета — мы уменьшили размер пакета более чем на 200 КБ (63,8 КБ в сжатом виде gzip) или на 50 % меньше, что означает ускорение загрузки на 1,3 секунды!

7. Используйте Firestore Lite, чтобы ускорить рендеринг начальной страницы.

Что такое Firestore Lite?

Firestore SDK предлагает сложное кэширование, потоковую передачу в реальном времени, постоянное хранилище, автономную синхронизацию с несколькими вкладками, повторные попытки, оптимистичный параллелизм и многое другое, и поэтому имеет довольно большой размер. Но вы можете просто захотеть получить данные один раз, не нуждаясь в каких-либо дополнительных функциях. Для таких случаев Firestore создал простое и легкое решение — новый пакет — Firestore Lite.

Одним из отличных вариантов использования Firestore Lite является оптимизация производительности первоначального рендеринга страницы, когда вам нужно только знать, вошел ли пользователь в систему, а затем прочитать некоторые данные из Firetore для отображения.

На этом этапе вы узнаете, как использовать Firestore lite, чтобы уменьшить размер пакета и ускорить начальный рендеринг страницы, а затем динамически загружать основной Firestore SDK, чтобы подписаться на обновления в реальном времени.

Вы проведете рефакторинг кода, чтобы:

1. Переместите службы реального времени в отдельный файл, чтобы их можно было динамически загружать с помощью динамического импорта.
2. Создайте новые функции для использования Firestore Lite для получения списка наблюдения и цен на акции.
3. Используйте новые функции Firestore Lite для получения данных для первоначального рендеринга страницы, а затем динамически загружайте службы реального времени для прослушивания обновлений в реальном времени.

Переместить сервисы реального времени в новый файл

1. Создайте новый файл с именем src/services.realtime.ts.
2. Переместите функции subscribeToTickerChanges() и subscribeToAllTickerChanges() из src/services.ts в новый файл.
3. Добавьте необходимые импорты в начало нового файла.

Здесь еще нужно внести пару изменений:

4. Сначала создайте экземпляр Firestore из основного Firestore SDK в верхней части файла, который будет использоваться в функциях. Здесь вы не можете импортировать экземпляр Firestore из firebase.ts , поскольку вы собираетесь за несколько шагов изменить его на экземпляр Firestore Lite, который будет использоваться только для первоначального рендеринга страницы.
5. Во-вторых, избавьтесь от переменной 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 для получения данных

1. Откройте src/services.ts.
2. Измените путь импорта с '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';

3. Добавьте функции для получения данных, необходимых для первоначального рендеринга страницы с помощью 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);
}

4. Откройте src/firebase.ts и измените путь импорта с 'firebase/firestore' на 'firebase/firestore/lite':

src/firebase.ts

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

Свяжите их все вместе

1. Откройте src/main.ts.
2. Вам понадобятся вновь созданные функции для получения данных для первоначального рендеринга страницы и пара вспомогательных функций для управления состоянием приложения. Итак, теперь обновите импорт:

источник/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';

3. Загрузите src/services.realtime , используя динамический импорт в верхней части файла. Переменная loadRealtimeService — это обещание, которое будет разрешено службам реального времени после загрузки кода. Вы будете использовать его позже, чтобы подписаться на обновления в реальном времени.

источник/main.ts

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

4. Измените обратный вызов onUserChange() на async функцию, чтобы мы могли использовать await в теле функции:

источник/main.ts

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

5. Теперь получите данные, чтобы выполнить первоначальный рендеринг страницы, используя новые функции, которые мы создали на предыдущем шаге.

В обратном вызове onUserChange() найдите условие if, при котором пользователь вошел в систему, и скопируйте и вставьте код внутри оператора if:

источник/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   
   }
}

6. В блоке else, где ни один пользователь не вошел в систему, получите информацию о ценах для всех акций с помощью Firestore lite, отобразите страницу, а затем прослушайте изменения цен после загрузки сервисов в реальном времени:

источник/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 .

Убедитесь, что приложение работает

1. Запустите npm run build , чтобы пересобрать приложение.
2. Откройте вкладку браузера по адресу http://localhost:8080 или обновите существующую вкладку.

Проверьте размер пакета

1. Откройте Инструменты разработчика Chrome.
2. Перейдите на вкладку «Сеть» .
3. Обновите страницу, чтобы перехватить сетевые запросы.
4. Найдите main.js и проверьте его размер.
5. Теперь это всего лишь 115 КБ (34,5 КБ в сжатом виде). Это на 75% меньше исходного размера пакета, который составлял 446 КБ (138 КБ в сжатом формате gzip)! В результате сайт загружается более чем на 2 секунды быстрее при подключении 3G — значительное улучшение производительности и удобства использования!

8. Поздравления

Поздравляем, вы успешно обновили приложение, сделали его меньше и быстрее!

Вы использовали пакеты совместимости для поэтапного обновления приложения и использовали Firestore Lite для ускорения первоначального рендеринга страниц, а затем динамически загружали основной Firestore для потоковой передачи изменений цен.

В ходе этой лаборатории вы также уменьшили размер пакета и улучшили время его загрузки:

Теперь вы знаете ключевые шаги, необходимые для обновления веб-приложения, использующего Firebase JS SDK v8, для использования нового модульного JS SDK.

дальнейшее чтение

• v8 -> v9 руководство по обновлению
• Узнать больше о версии 9
• Начните работу с версией 9

Справочная документация

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