Tingkatkan performa 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 mencapai performa yang lebih baik.

Perbedaan paling mencolok dalam SDK JS modular adalah fitur kini disusun dalam fungsi floating bebas yang akan Anda impor, bukan dalam namespace firebase tunggal yang mencakup semuanya. Cara baru pengorganisasian kode ini memungkinkan penghapusan kode yang tidak digunakan, dan Anda akan mempelajari cara mengupgrade aplikasi yang saat ini menggunakan Firebase JS SDK v8 ke SDK modular yang baru.

Untuk memberikan proses upgrade yang lancar, serangkaian paket kompatibilitas disediakan. Dalam codelab ini, Anda akan mempelajari cara menggunakan paket kompatibilitas untuk memindahkan aplikasi bagian demi bagian.

Hal yang akan Anda build

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

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

Codelab ini berfokus pada mengupgrade 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 dalam codelab untuk mengetahui cara mendapatkan kode.)

2. Memulai persiapan

Mendapatkan kode

Semua yang Anda perlukan untuk project ini ada 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 Anda belum menginstal git, Anda dapat mendownload repositori sebagai file ZIP, dan mengekstrak file ZIP yang didownload.

Mengimpor aplikasi

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

3. Menetapkan dasar pengukuran

Apa titik awal Anda?

Titik awal Anda adalah aplikasi daftar pantauan saham yang didesain untuk codelab ini. Kode telah disederhanakan untuk mengilustrasikan konsep dalam codelab ini, dan memiliki sedikit penanganan error. Jika Anda memilih menggunakan kembali salah satu kode ini di aplikasi produksi, pastikan Anda menangani semua 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 pantauan dengan mengklik tombol Tambahkan, mengetik huruf, dan mengklik baris hasil penelusuran yang muncul di bawah.
3. Hapus saham dari daftar pantauan dengan mengklik x di akhir baris.
4. Pantau info terbaru harga saham secara real-time.
5. Buka Chrome DevTools, buka tab Network, lalu centang Disable cache dan Use large request rows. Nonaktifkan cache memastikan kita selalu mendapatkan perubahan terbaru setelah halaman dimuat ulang dan Gunakan baris permintaan besar membuat baris menampilkan ukuran yang dikirim dan ukuran resource untuk suatu resource. Dalam codelab ini, kita terutama tertarik dengan ukuran main.js.

6. Muat aplikasi dalam berbagai kondisi jaringan menggunakan throttling simulasi. Anda akan menggunakan Slow 3G untuk mengukur waktu pemuatan dalam codelab ini karena di sinilah ukuran paket yang lebih kecil paling membantu.

Sekarang, mulai 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. Dalam 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 gangguan, 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" 
}

Instal ulang dependensi

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

Mengubah jalur impor

Paket kompatibilitas diekspos di bawah submodule 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 membangun kembali aplikasi.
2. Buka tab browser di http://localhost:8080 , atau muat ulang tab yang ada.
3. Gunakan 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 dasarnya karena Auth API relatif sederhana. Mengupgrade Firestore sedikit lebih rumit, dan Anda akan mempelajari cara melakukannya di bagian berikutnya.

Inisialisasi Update Auth

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

src/firebase.ts

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

3. Hapus import ‘firebase/compat/auth'.
4. Ganti export const firebaseAuth = app.auth(); dengan:

src/firebase.ts

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

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

3. Hapus User dari import { firebaseAuth, User } from './firebase'; karena Anda telah mengimpor User dari ‘firebase/auth'.
4. Perbarui fungsi untuk menggunakan API modular.

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

Pada versi 9, layanan diteruskan sebagai argumen pertama ke fungsi. Layanan adalah objek yang Anda dapatkan dari menginisialisasi layanan Firebase, misalnya objek yang ditampilkan dari getAuth() atau initializeAuth(). Objek ini menyimpan status layanan Firebase tertentu, dan fungsi menggunakan status tersebut untuk melakukan tugasnya. Mari 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';

Verifikasi aplikasi berfungsi

1. Jalankan npm run build untuk membangun kembali aplikasi.
2. Buka tab browser di http://localhost:8080 , atau muat ulang tab yang ada
3. Gunakan 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 setelah dikompresi 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.

6. Mengupgrade Aplikasi Firebase dan Firestore untuk menggunakan API modular

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

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

Perbarui inisialisasi Firestore

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

src/firebase.ts

import { getFirestore } from 'firebase/firestore';

2. Ganti export const firestore = app.firestore(); dengan:

src/firebase.ts

export const firestore = getFirestore();

3. Hapus 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' sekarang akan terlihat seperti berikut:

src/services.ts

import { firestore } from './firebase';

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

Perbarui search()

1. Buat referensi ke koleksi yang berisi semua ticker:

src/services.ts

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

2. Gunakan getDocs()untuk mengambil semua dokumen dari koleksi:

src/services.ts

const tickers = await getDocs(tickersCollRef);

Lihat search() untuk kode yang sudah selesai.

Perbarui addToWatchList()

Gunakan doc() untuk membuat referensi dokumen ke daftar pantauan pengguna, lalu tambahkan ticker ke dalamnya 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 });
}

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

Update subscribeToTickerChanges()

1. Gunakan doc() untuk membuat referensi dokumen ke daftar tontonan pengguna terlebih dahulu, lalu dengarkan 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 */
});

2. Setelah Anda memiliki ticker dalam daftar pantauan, gunakan query() untuk membuat kueri guna mengambil harganya dan gunakan onSnapshot() untuk memantau 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 lengkap.

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

Verifikasi aplikasi berfungsi

1. Jalankan npm run build untuk membangun kembali aplikasi.
2. Buka tab browser di http://localhost:8080 , atau muat ulang tab yang ada
3. Gunakan 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 - kita telah mengurangi ukuran paket lebih dari 200 KB (63,8 KB kompresi gzip), atau 50% lebih kecil, yang berarti waktu pemuatan 1,3 detik lebih cepat.

7. Menggunakan Firestore Lite untuk mempercepat rendering halaman awal

Apa yang dimaksud dengan Firestore Lite?

SDK Firestore menawarkan caching 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, yang 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 SDK Firestore utama secara dinamis untuk berlangganan update real-time.

Anda akan memfaktorkan ulang kode untuk:

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 muat 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:

4. Pertama, buat instance Firestore dari Firestore SDK utama di bagian atas file untuk 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.
5. Kedua, hapus variabel firstload dan blok if yang dilindungi olehnya. Fungsi tersebut 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' ke ‘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';

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

4. 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 akan memerlukan fungsi yang baru dibuat untuk mengambil data untuk rendering halaman awal, dan beberapa fungsi pembantu 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';

3. Muat src/services.realtime menggunakan impor dinamis di bagian atas file. Variabel loadRealtimeService adalah janji yang akan diselesaikan dengan layanan real-time setelah kode dimuat. Anda akan menggunakannya nanti untuk berlangganan update real-time.

src/main.ts

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

4. Ubah callback onUserChange() menjadi fungsi async, sehingga kita dapat menggunakan await di isi fungsi:

src/main.ts

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

5. Sekarang, ambil data untuk membuat rendering halaman awal menggunakan fungsi baru yang kita buat pada 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   
   }
}

6. Di blok else tempat tidak ada pengguna yang login, ambil info harga untuk semua saham menggunakan firestore lite, render halaman, lalu dengarkan 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.

Verifikasi aplikasi berfungsi

1. Jalankan npm run build untuk membangun kembali aplikasi.
2. Buka tab browser di 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). Ukuran ini 75% lebih kecil dari ukuran paket asli yang sebesar 446 KB(138 KB dengan kompresi gzip). Hasilnya, situs dimuat lebih cepat 2 detik melalui koneksi 3G - peningkatan performa dan pengalaman pengguna yang luar biasa.

8. Selamat

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

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

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

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

Bacaan lebih lanjut

• Panduan upgrade v8 -> v9
• Pelajari v9 lebih lanjut
• Mulai menggunakan v9

Dokumen referensi

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