Tingkatkan kualitas aplikasi web Anda dengan bermigrasi ke Firebase JS SDK modular

1. Sebelum memulai

Firebase JS SDK modular adalah penulisan ulang JS SDK yang ada dan akan dirilis sebagai versi utama berikutnya. Hal ini memungkinkan developer mengecualikan kode yang tidak digunakan dari Firebase JS SDK untuk membuat paket yang lebih kecil dan mendapatkan performa yang lebih baik.

Perbedaan yang paling terlihat dalam SDK JS modular adalah fitur kini diatur dalam fungsi mengambang bebas yang akan Anda impor, bukan dalam satu namespace firebase yang menyertakan semuanya. Cara baru pengaturan kode ini memungkinkan tree shaking, dan Anda akan mempelajari cara mengupgrade aplikasi apa pun yang saat ini menggunakan Firebase JS SDK v8 ke SDK modular baru.

Untuk memberikan proses upgrade yang lancar, serangkaian paket kompatibilitas disediakan. Dalam codelab ini, Anda akan mempelajari cara menggunakan paket kompatibilitas untuk melakukan port aplikasi secara bertahap.

Hal yang akan Anda build

Dalam codelab ini, Anda akan memigrasikan aplikasi web daftar pantau saham yang ada secara bertahap yang menggunakan v8 JS SDK ke JS SDK modular baru dalam tiga tahap:

  • Mengupgrade aplikasi untuk menggunakan paket kompatibilitas
  • Mengupgrade aplikasi dari paket kompatibilitas ke API modular secara bertahap
  • Menggunakan Firestore Lite, implementasi Firestore SDK yang ringan, untuk lebih meningkatkan performa aplikasi

2d351cb47b604ad7.png

Codelab ini berfokus pada upgrade Firebase SDK. Konsep dan blok kode lainnya akan dibahas sekilas dan disediakan agar Anda cukup menyalin dan menempelkannya.

Hal yang akan Anda perlukan

  • Browser pilihan Anda, seperti Chrome
  • IDE/editor teks pilihan Anda, seperti WebStorm, Atom, Sublime, atau VS Code
  • Pengelola paket npm, yang biasanya disertakan dengan Node.js
  • Kode contoh codelab (Lihat langkah berikutnya di codelab untuk mengetahui cara mendapatkan kode.)

2. Memulai persiapan

Mendapatkan kode

Semua yang Anda perlukan untuk project ini berada di repo Git. Untuk memulai, Anda harus mengambil kode dan membukanya di lingkungan pengembangan favorit Anda.

Clone repositori GitHub codelab dari command line:

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

Atau, jika belum menginstal git, Anda dapat mendownload repositori sebagai file ZIP, dan mengekstrak file zip yang didownload.

Mengimpor aplikasi

  1. Dengan IDE, buka atau impor direktori codelab-modular-sdk.
  2. Jalankan npm install untuk menginstal dependensi yang diperlukan untuk mem-build dan menjalankan aplikasi secara lokal.
  3. Jalankan npm run build untuk mem-build aplikasi.
  4. Jalankan npm run serve untuk memulai server web
  5. Buka tab browser di http://localhost:8080

71a8a7d47392e8f4.png

3. Menetapkan dasar pengukuran

Apa titik awal Anda?

Titik awal Anda adalah aplikasi daftar pantau saham yang dirancang untuk codelab ini. Kode telah disederhanakan untuk mengilustrasikan konsep dalam codelab ini, dan memiliki sedikit penanganan error. Jika Anda memilih untuk menggunakan kembali salah satu kode ini di aplikasi produksi, pastikan untuk menangani error dan menguji semua kode sepenuhnya.

Pastikan semuanya berfungsi di aplikasi:

  1. Login secara anonim menggunakan tombol login di sudut kanan atas.
  2. Setelah login, telusuri dan tambahkan "NFLX", "SBUX", dan "T" ke daftar tontonan dengan mengklik tombol Tambahkan, mengetik huruf, dan mengklik baris hasil penelusuran yang muncul di bawah.
  3. Hapus saham dari daftar pantau dengan mengklik x di akhir baris.
  4. Lihat info terbaru harga saham secara real-time.
  5. Buka Chrome DevTools, buka tab Jaringan, lalu centang Nonaktifkan cache dan Gunakan baris permintaan besar. Nonaktifkan cache memastikan kita selalu mendapatkan perubahan terbaru setelah memuat ulang dan Gunakan baris permintaan besar membuat baris menampilkan ukuran yang dikirim dan ukuran resource untuk resource. Dalam codelab ini, kita terutama tertarik dengan ukuran main.js.

48a096debb2aa940.png

  1. Muat aplikasi dalam berbagai kondisi jaringan menggunakan throttling simulasi. Anda akan menggunakan 3G Lambat untuk mengukur waktu pemuatan dalam codelab ini karena ukuran paket yang lebih kecil sangat membantu.

4397cb2c1327089.png

Sekarang, mulailah dan migrasikan aplikasi ke API modular baru.

4. Menggunakan paket kompatibilitas

Paket kompatibilitas memungkinkan Anda mengupgrade ke versi SDK baru tanpa mengubah semua kode Firebase sekaligus. Anda dapat mengupgradenya ke API modular secara bertahap.

Pada langkah ini, Anda akan mengupgrade library Firebase dari v8 ke versi baru dan mengubah kode untuk menggunakan paket kompatibilitas. Pada langkah-langkah berikut, Anda akan mempelajari cara mengupgrade hanya kode Firebase Auth untuk menggunakan API modular terlebih dahulu, lalu mengupgrade kode Firestore.

Di akhir setiap langkah, Anda akan dapat mengompilasi dan menjalankan aplikasi tanpa kerusakan, serta melihat penurunan ukuran paket saat kami memigrasikan setiap produk.

Mendapatkan SDK baru

Temukan bagian dependensi di package.json dan ganti dengan kode berikut:

package.json

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

Menginstal ulang dependensi

Karena kita mengubah versi dependensi, kita perlu menjalankan ulang npm install untuk mendapatkan versi baru dependensi.

Mengubah jalur impor

Paket kompatibilitas ditampilkan di submodul firebase/compat, jadi kita akan memperbarui jalur impor yang sesuai:

  1. Buka file src/firebase.ts
  2. Ganti impor yang ada dengan impor berikut:

src/firebase.ts

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

Memverifikasi aplikasi berfungsi

  1. Jalankan npm run build untuk mem-build ulang aplikasi.
  2. Buka tab browser di http://localhost:8080 , atau muat ulang tab yang ada.
  3. Mainkan aplikasi. Semuanya akan tetap berfungsi.

5. Mengupgrade Auth untuk menggunakan API modular

Anda dapat mengupgrade produk Firebase dalam urutan apa pun. Dalam codelab ini, Anda akan mengupgrade Auth terlebih dahulu untuk mempelajari konsep dasar karena Auth API relatif sederhana. Mengupgrade Firestore sedikit lebih rumit, dan Anda akan mempelajari cara melakukannya di bagian berikutnya.

Memperbarui inisialisasi Auth

  1. Buka file src/firebase.ts
  2. Tambahkan impor berikut:

src/firebase.ts

import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';
  1. Hapus import ‘firebase/compat/auth'.
  2. Ganti export const firebaseAuth = app.auth(); dengan:

src/firebase.ts

export const firebaseAuth = initializeAuth(app, { persistence: [indexedDBLocalPersistence] });
  1. Hapus export type User = firebase.User; di akhir file. User akan diekspor langsung di src/auth.ts yang akan Anda ubah berikutnya.

Memperbarui Kode auth

  1. Buka file src/auth.ts
  2. Tambahkan impor berikut ke bagian atas file:

src/auth.ts

import { 
    signInAnonymously, 
    signOut,
    onAuthStateChanged,
    User
} from 'firebase/auth';
  1. Hapus User dari import { firebaseAuth, User } from './firebase'; karena Anda telah mengimpor User dari ‘firebase/auth'.
  2. Perbarui fungsi untuk menggunakan API modular.

Seperti yang telah Anda lihat sebelumnya saat kami memperbarui pernyataan impor, paket dalam versi 9 diatur berdasarkan fungsi yang dapat Anda impor, berbeda dengan API versi 8 yang didasarkan pada namespace dan pola layanan menggunakan dot-chaining. Pengaturan kode baru inilah yang memungkinkan tree shaking kode yang tidak digunakan, karena memungkinkan alat build menganalisis kode yang digunakan dan yang tidak digunakan.

Pada versi 9, layanan diteruskan sebagai argumen pertama ke fungsi. Layanan adalah objek yang Anda dapatkan dari melakukan inisialisasi layanan Firebase, misalnya objek yang ditampilkan dari getAuth() atau initializeAuth(). Fungsi ini menyimpan status layanan Firebase tertentu, dan fungsi tersebut menggunakan status untuk melakukan tugasnya. Mari kita terapkan pola ini untuk menerapkan fungsi berikut:

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

Memverifikasi aplikasi berfungsi

  1. Jalankan npm run build untuk mem-build ulang aplikasi.
  2. Buka tab browser ke http://localhost:8080 , atau muat ulang tab yang ada
  3. Mainkan aplikasi. Semuanya akan tetap berfungsi.

Memeriksa ukuran paket

  1. Buka Chrome DevTools.
  2. Beralihlah ke tab Jaringan.
  3. Muat ulang halaman untuk merekam permintaan jaringan.
  4. Cari main.js dan periksa ukurannya. Anda telah mengurangi ukuran paket sebesar 100 KB (36 KB dengan kompresi gzip), atau sekitar 22% lebih kecil hanya dengan mengubah beberapa baris kode. Situs juga dimuat 0,75 detik lebih cepat pada koneksi 3G yang lambat.

2e4eafaf66cd829b.png

6. Mengupgrade Aplikasi Firebase dan Firestore untuk menggunakan API modular

Memperbarui inisialisasi Firebase

  1. Buka file src/firebase.ts.
  2. Ganti import firebase from ‘firebase/compat/app'; dengan:

src/firebase.ts

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

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

Memperbarui inisialisasi Firestore

  1. Dalam file yang sama src/firebase.ts,, ganti import 'firebase/compat/firestore'; dengan

src/firebase.ts

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

src/firebase.ts

export const firestore = getFirestore();
  1. Menghapus semua baris setelah "export const firestore = ..."

Memperbarui impor

  1. Buka file src/services.ts.
  2. Hapus FirestoreFieldPath, FirestoreFieldValue, dan QuerySnapshot dari impor. Impor dari './firebase' kini akan terlihat seperti berikut:

src/services.ts

import { firestore } from './firebase';
  1. Impor fungsi dan jenis yang akan Anda gunakan di bagian atas file:
    **src/services.ts**

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove, 
    onSnapshot, 
    query, 
    where, 
    documentId, 
    QuerySnapshot
} from 'firebase/firestore';
  1. Buat referensi ke koleksi yang berisi semua ticker:

src/services.ts

const tickersCollRef = collection(firestore, 'current');
  1. Gunakan getDocs() untuk mengambil semua dokumen dari koleksi:

src/services.ts

const tickers = await getDocs(tickersCollRef);

Lihat search() untuk kode yang sudah selesai.

Memperbarui addToWatchList()

Gunakan doc() untuk membuat referensi dokumen ke daftar tontonan pengguna, lalu tambahkan ticker ke daftar tersebut menggunakan setDoc() dengan 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 });
}

Memperbarui deleteFromWatchList()

Demikian pula, hapus ticker dari daftar tontonan pengguna menggunakan setDoc() dengan 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 });
}

Memperbarui subscribeToTickerChanges()

  1. Gunakan doc() untuk membuat referensi dokumen ke daftar tontonan pengguna terlebih dahulu, lalu memproses perubahan daftar tontonan menggunakan onSnapshot():

src/services.ts

const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
const unsubscribe = onSnapshot(watchlistRef, snapshot => {
   /* subscribe to ticker price changes */
});
  1. Setelah memiliki ticker di daftar pantau, gunakan query() untuk membuat kueri guna mengambil harganya dan gunakan onSnapshot() untuk memproses perubahan harganya:

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

Lihat subscribeToTickerChanges() untuk implementasi lengkapnya.

Memperbarui subscribeToAllTickerChanges()

Pertama, Anda akan menggunakan collection() untuk membuat referensi ke koleksi yang berisi harga untuk semua ticker terlebih dahulu, lalu menggunakan onSnapshot() untuk memproses perubahan harga:

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

Memverifikasi aplikasi berfungsi

  1. Jalankan npm run build untuk mem-build ulang aplikasi.
  2. Buka tab browser ke http://localhost:8080 , atau muat ulang tab yang ada
  3. Mainkan aplikasi. Semuanya akan tetap berfungsi.

Memeriksa ukuran paket

  1. Buka Chrome DevTools.
  2. Beralihlah ke tab Jaringan.
  3. Muat ulang halaman untuk merekam permintaan jaringan.
  4. Cari main.js dan periksa ukurannya. Bandingkan lagi dengan ukuran paket asli - kami telah mengurangi ukuran paket sebesar lebih dari 200 KB (63,8 KB dengan kompresi gzip), atau 50% lebih kecil, yang berarti waktu pemuatan lebih cepat 1,3 detik.

7660cdc574ee8571.png

7. Menggunakan Firestore Lite untuk mempercepat rendering halaman awal

Apa yang dimaksud dengan Firestore Lite?

Firestore SDK menawarkan penyimpanan dalam cache yang kompleks, streaming real-time, penyimpanan persisten, sinkronisasi offline multi-tab, percobaan ulang, konkurensi optimis, dan banyak lagi, sehingga ukurannya cukup besar. Namun, Anda mungkin hanya ingin mendapatkan data satu kali, tanpa memerlukan fitur lanjutan apa pun. Untuk kasus tersebut, Firestore membuat solusi yang sederhana dan ringan, yaitu paket baru — Firestore Lite.

Salah satu kasus penggunaan yang bagus untuk Firestore Lite adalah mengoptimalkan performa rendering halaman awal, tempat Anda hanya perlu mengetahui apakah pengguna login atau tidak, lalu membaca beberapa data dari Firestore untuk ditampilkan.

Pada langkah ini, Anda akan mempelajari cara menggunakan Firestore lite untuk mengurangi ukuran paket guna mempercepat rendering halaman awal, lalu memuat Firestore SDK utama secara dinamis untuk berlangganan update real-time.

Anda akan memfaktorkan ulang kode menjadi:

  1. Pindahkan layanan real-time ke file terpisah, sehingga dapat dimuat secara dinamis menggunakan impor dinamis.
  2. Buat fungsi baru untuk menggunakan Firestore Lite guna mengambil daftar pantauan dan harga saham.
  3. Gunakan fungsi Firestore Lite baru untuk mengambil data guna membuat rendering halaman awal, lalu memuat layanan real-time secara dinamis untuk memproses update real-time.

Memindahkan layanan real-time ke file baru

  1. Buat file baru bernama src/services.realtime.ts.
  2. Pindahkan fungsi subscribeToTickerChanges() dan subscribeToAllTickerChanges() dari src/services.ts ke file baru.
  3. Tambahkan impor yang diperlukan ke bagian atas file baru.

Anda masih perlu melakukan beberapa perubahan di sini:

  1. Pertama, buat instance Firestore dari Firestore SDK utama di bagian atas file yang akan digunakan dalam fungsi. Anda tidak dapat mengimpor instance Firestore dari firebase.ts di sini karena Anda akan mengubahnya menjadi instance Firestore Lite dalam beberapa langkah, yang hanya akan digunakan untuk rendering halaman awal.
  2. Kedua, hapus variabel firstload dan blok if yang dijaga olehnya. Fungsinya akan dipindahkan ke fungsi baru yang akan Anda buat pada langkah berikutnya.

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

Menggunakan Firestore Lite untuk mengambil data

  1. Buka src/services.ts.
  2. Ubah jalur impor dari ‘firebase/firestore' menjadi ‘firebase/firestore/lite',, tambahkan getDoc, dan hapus onSnapshot dari daftar impor:

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. Tambahkan fungsi untuk mengambil data yang diperlukan untuk rendering halaman awal menggunakan 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. Buka src/firebase.ts, dan ubah jalur impor dari ‘firebase/firestore' menjadi ‘firebase/firestore/lite':

src/firebase.ts

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

Menyatukan semuanya

  1. Buka src/main.ts.
  2. Anda memerlukan fungsi yang baru dibuat untuk mengambil data untuk rendering halaman awal, dan beberapa fungsi bantuan untuk mengelola status aplikasi. Jadi, sekarang perbarui impor:

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. Muat src/services.realtime menggunakan impor dinamis di bagian atas file. Variabel loadRealtimeService adalah promise yang akan diselesaikan dengan layanan real-time setelah kode dimuat. Anda akan menggunakannya nanti untuk berlangganan info terbaru secara real time.

src/main.ts

const loadRealtimeService = import('./services.realtime');
loadRealtimeService.then(() => {
   setRealtimeServicesLoaded(true);
});
  1. Ubah callback onUserChange() menjadi fungsi async, sehingga kita dapat menggunakan await dalam isi fungsi:

src/main.ts

onUserChange(async user => {
 // callback body
});
  1. Sekarang, ambil data untuk membuat rendering halaman awal menggunakan fungsi baru yang kita buat di langkah sebelumnya.

Di callback onUserChange(), temukan kondisi if saat pengguna login, lalu salin & tempel kode di dalam pernyataan 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. Di blok else saat tidak ada pengguna yang login, ambil info harga untuk semua saham menggunakan firestore lite, render halaman, lalu proses perubahan harga setelah layanan real-time dimuat:

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

Lihat src/main.ts untuk kode yang sudah selesai.

Memverifikasi aplikasi berfungsi

  1. Jalankan npm run build untuk mem-build ulang aplikasi.
  2. Buka tab browser ke http://localhost:8080 , atau muat ulang tab yang ada.

Memeriksa ukuran paket

  1. Buka Chrome DevTools.
  2. Beralihlah ke tab Jaringan.
  3. Muat ulang halaman untuk merekam permintaan jaringan
  4. Cari main.js dan periksa ukurannya.
  5. Sekarang hanya 115 KB (34,5 KB dengan kompresi gzip). Ukurannya 75% lebih kecil dari ukuran paket asli yang sebesar 446 KB(138 KB dengan kompresi gzip). Hasilnya, situs dimuat lebih cepat 2 detik di koneksi 3G - peningkatan performa dan pengalaman pengguna yang luar biasa.

9ea7398a8c8ef81b.png

8. Selamat

Selamat, Anda berhasil mengupgrade aplikasi dan membuatnya lebih kecil dan lebih cepat.

Anda menggunakan paket kompatibilitas untuk mengupgrade aplikasi secara bertahap, dan menggunakan Firestore Lite untuk mempercepat rendering halaman awal, lalu memuat Firestore utama secara dinamis untuk melakukan streaming perubahan harga.

Anda juga telah mengurangi ukuran paket dan meningkatkan waktu muat selama codelab ini:

main.js

ukuran resource (kb)

ukuran yang di-gzip (kb)

waktu pemuatan (d) (melalui 3G lambat)

v8

446

138

4,92

compat v9

429

124

4,65

Auth modular khusus v9

348

102

4,2

v9 sepenuhnya modular

244

74,6

3.66

v9 sepenuhnya modular + Firestore lite

117

34,9

2,88

32a71bd5a774e035.png

Sekarang Anda mengetahui langkah-langkah utama yang diperlukan untuk mengupgrade aplikasi web yang menggunakan Firebase JS SDK v8 agar dapat menggunakan JS SDK modular baru.

Bacaan lebih lanjut

Dokumen referensi