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

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

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

Наиболее заметное отличие модульного JS SDK заключается в том, что теперь функции организованы в свободно плавающие функции, которые вы будете импортировать, в отличие от единого пространства имен firebase , включающего все. Этот новый способ организации кода позволяет выполнять «удаление лишнего кода» (tree shaking), и вы узнаете, как обновить любое приложение, использующее Firebase JS SDK версии 8, до новой модульной версии.

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

Что вы построите

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

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

2d351cb47b604ad7.png

Данный практический урок посвящен обновлению 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

71a8a7d47392e8f4.png

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

С чего вы начинаете?

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

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

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

48a096debb2aa940.png

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

4397cb2c1327089.png

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

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

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

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

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

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

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

package.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. Обновите систему аутентификации для использования модульного API.

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

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

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

src/firebase.ts 

import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';
  1. Удалите import 'firebase/compat/auth'.
  2. Замените export const firebaseAuth = app.auth(); ` на:

src/firebase.ts 

export const firebaseAuth = initializeAuth(app, { persistence: [indexedDBLocalPersistence] });
  1. Удалите export type User = firebase.User; в конце файла. User будет экспортирован напрямую в src/auth.ts , который вы измените позже.

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

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

src/auth.ts 

import { 
    signInAnonymously, 
    signOut,
    onAuthStateChanged,
    User
} from 'firebase/auth';
  1. Удалите User из import { firebaseAuth, User } from './firebase'; , поскольку вы уже импортировали User из 'firebase/auth'.
  2. Обновите функции для использования модульного 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';

Проверьте, работает ли приложение.

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

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

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

2e4eafaf66cd829b.png

6. Обновите Firebase App и Firestore для использования модульного API.

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

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

src/firebase.ts 

import { initializeApp } from 'firebase/app';
  1. Замените 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.firebasestorage.app", 
    messagingSenderId: "875614679042", 
    appId: "1:875614679042:web:5813c3e70a33e91ba0371b"
});

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

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

src/firebase.ts 

import { getFirestore } from 'firebase/firestore';
  1. Замените export const firestore = app.firestore(); ` на:

src/firebase.ts 

export const firestore = getFirestore();
  1. Удалите все строки после " export const firestore = ... "

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

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

src/services.ts 

import { firestore } from './firebase';
  1. В начало файла импортируйте функции и типы, которые вы собираетесь использовать: 
    **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');
  1. Используйте 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()

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

src/services.ts 

const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
const unsubscribe = onSnapshot(watchlistRef, snapshot => {
   /* subscribe to ticker price changes */
});
  1. После того, как вы добавите тикеры в список наблюдения, используйте 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);
   });
}

Проверьте, работает ли приложение.

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

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

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

7660cdc574ee8571.png

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

Что такое Firestore Lite?

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

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

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

Вам потребуется переписать код следующим образом:

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

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

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

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

  1. Сначала создайте экземпляр Firestore из основного SDK Firestore в верхней части файла, который будет использоваться в функциях. Вы не можете импортировать экземпляр Firestore из firebase.ts здесь, потому что через несколько шагов вы измените его на экземпляр Firestore Lite, который будет использоваться только для первоначальной отрисовки страницы.
  2. Во-вторых, удалите переменную 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';
  1. Добавьте функции для получения данных, необходимых для первоначальной отрисовки страницы, используя 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. Откройте src/firebase.ts и измените путь импорта с 'firebase/firestore' на 'firebase/firestore/lite':

src/firebase.ts 

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

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

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

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. Загрузите src/services.realtime , используя динамический импорт в начале файла. Переменная loadRealtimeService — это промис, который разрешится с сервисами реального времени после загрузки кода. Вы будете использовать его позже для подписки на обновления в реальном времени.

src/main.ts 

const loadRealtimeService = import('./services.realtime');
loadRealtimeService.then(() => {
   setRealtimeServicesLoaded(true);
});
  1. Измените функцию обратного вызова onUserChange() на async , чтобы мы могли использовать await в теле функции:

src/main.ts 

onUserChange(async user => {
 // callback body
});
  1. Теперь, используя созданные нами на предыдущем шаге функции, получите данные для первоначальной отрисовки страницы.

В функции обратного вызова onUserChange() найдите условие 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   
   }
}
  1. В блоке else, где пользователь не авторизован, получите информацию о ценах на все акции с помощью 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 .

Проверьте, работает ли приложение.

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

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

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

9ea7398a8c8ef81b.png

8. Поздравляем!

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

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

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

main.js

Размер ресурса (кб)

Размер в сжатом виде (кб)

Время загрузки (с) (при медленной нагрузке 3 г)

v8

446

138

4.92

совместимость v9

429

124

4.65

v9 только модульная аутентификация

348

102

4.2

v9 полностью модульная

244

74.6

3.66

v9 полностью модульная + Firestore lite

117

34.9

2.88

32a71bd5a774e035.png

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

Дополнительная информация

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