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 sudah ada dan akan dirilis sebagai versi utama berikutnya. Dengan API ini, developer dapat mengecualikan kode yang tidak digunakan dari Firebase JS SDK untuk membuat paket yang lebih kecil dan mencapai performa yang lebih baik.

Perbedaan yang paling terlihat dalam JS SDK modular adalah bahwa 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 untuk tree shaking, dan Anda akan mempelajari cara mengupgrade aplikasi apa pun yang saat ini menggunakan Firebase JS SDK v8 ke aplikasi modular baru.

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

Hal yang akan Anda build

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

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

2d351cb47b604ad7.pngS

Codelab ini berfokus pada upgrade Firebase SDK. Konsep dan blok kode lainnya dibahas sekilas dan disediakan sehingga 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 dilengkapi dengan Node.js
  • Kode contoh codelab (Lihat langkah codelab berikutnya 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 git belum terinstal, Anda dapat mendownload repositori sebagai file ZIP dan mengekstrak file ZIP yang didownload.

Mengimpor aplikasi

  1. Dengan menggunakan IDE Anda, buka atau impor direktori codelab-modular-sdk.
  2. Jalankan npm install untuk menginstal dependensi yang diperlukan untuk membangun 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

71a8a7d47392e8f4.pngS

3. Menetapkan dasar pengukuran

Apa titik awal Anda?

Titik awal Anda adalah aplikasi daftar pantauan 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 kode ini di aplikasi produksi, pastikan Anda menangani error dan menguji semua kode sepenuhnya.

Pastikan semuanya berfungsi di aplikasi:

  1. Login secara anonim menggunakan tombol login di pojok kanan atas.
  2. Setelah login, cari dan tambahkan "NFLX", "SBUX" dan "T" ke daftar pantauan dengan mengklik tombol Tambahkan, mengetikkan huruf, dan mengklik baris hasil penelusuran yang muncul di bawah.
  3. Hapus saham dari daftar pantauan dengan mengklik x di akhir baris.
  4. Tonton pembaruan real-time harga saham.
  5. Buka Chrome DevTools, buka tab Jaringan lalu centang Disable cache dan Use large request rows. Nonaktifkan cache memastikan kita selalu mendapatkan perubahan terbaru setelah pembaruan dilakukan, dan Gunakan baris permintaan besar membuat baris menampilkan ukuran yang ditransmisikan serta ukuran resource untuk resource. Dalam codelab ini, kita terutama tertarik dengan ukuran main.js.

48a096debb2aa940.pngS

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

4397cb2c1327089.png

Sekarang lanjutkan dan mulailah memigrasikan aplikasi ke API modular yang baru.

4. Menggunakan paket kompatibilitas

Paket kompatibilitas memungkinkan Anda melakukan upgrade 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 agar dapat menggunakan API modular terlebih dahulu, lalu mengupgrade kode Firestore.

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

Dapatkan 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 dalam submodul firebase/compat, sehingga kita akan mengupdate jalur impor sebagaimana mestinya:

  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 fungsi aplikasi

  1. Jalankan npm run build untuk membangun ulang aplikasi.
  2. Buka tab browser di http://localhost:8080 , atau muat ulang tab yang ada.
  3. Google Play dengan aplikasinya. Semuanya harus 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. Upgrade Firestore sedikit lebih rumit, dan Anda akan mempelajari cara melakukannya selanjutnya.

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 langsung diekspor 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. Update fungsi agar menggunakan API modular.

Seperti yang sudah 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 dot-chained dan pola layanan. Pengorganisasian kode baru inilah yang memungkinkan tree shaking 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 saat menginisialisasi layanan Firebase, misalnya objek yang ditampilkan dari getAuth() atau initializeAuth(). Fungsi tersebut menyimpan status layanan Firebase tertentu, dan fungsi tersebut menggunakan status tersebut untuk melakukan tugasnya. Mari kita terapkan pola ini untuk mengimplementasikan 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 fungsi aplikasi

  1. Jalankan npm run build untuk membangun ulang aplikasi.
  2. Buka tab browser di http://localhost:8080 , atau muat ulang tab yang ada
  3. Google Play dengan aplikasinya. Semuanya harus tetap berfungsi.

Memeriksa ukuran paket

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

2e4eafaf66cd829b.pngS

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.appspot.com", 
    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. 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';
  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 simbol:

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.

Mengupdate addToWatchList()

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

Mengupdate 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 proses 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 Anda memiliki ticker di daftar pantauan, gunakan query() untuk membuat kueri guna mengambil harga 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 mengetahui penerapan lengkap.

Mengupdate subscribeToAllTickerChanges()

Pertama-tama, 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 fungsi aplikasi

  1. Jalankan npm run build untuk membangun ulang aplikasi.
  2. Buka tab browser di http://localhost:8080 , atau muat ulang tab yang ada
  3. Google Play dengan aplikasinya. Semuanya harus tetap berfungsi.

Memeriksa ukuran paket

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

7660cdc574ee8571.pngS

7. Menggunakan Firestore Lite untuk mempercepat rendering halaman awal

Apa itu Firestore Lite?

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

Salah satu kasus penggunaan yang bagus untuk Firestore Lite adalah mengoptimalkan performa rendering halaman awal. Di sini, Anda hanya perlu mengetahui apakah pengguna login atau tidak, lalu membaca beberapa data dari Firetore 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 untuk:

  1. Pindahkan layanan real-time ke file terpisah, sehingga layanan tersebut 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 melakukan 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 membuat 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 dilindungi olehnya. Fungsinya akan dipindahkan ke fungsi baru yang akan Anda buat di 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';

Satukan semuanya

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

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 pembaruan 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.

Dalam callback onUserChange(), temukan kondisi if tempat 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 di mana tidak ada pengguna yang login, ambil info harga untuk semua saham menggunakan firestore lite, render halaman, lalu pantau 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 fungsi aplikasi

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

Memeriksa ukuran paket

  1. Buka Chrome Devtools.
  2. Alihkan ke tab Jaringan.
  3. Muat ulang halaman untuk mencatat permintaan jaringan
  4. Cari main.js dan periksa ukurannya.
  5. Sekarang ukurannya hanya 115KB (34,5KB gzip). Itu 75% lebih kecil dari ukuran paket asli yaitu 446KB(138KB gzip)! Sebagai hasilnya, situs ini dimuat lebih dari 2 detik lebih cepat melalui koneksi 3G - peningkatan performa dan pengalaman pengguna yang luar biasa!

9ea7398a8c8ef81b.pngS

8. Selamat

Selamat, Anda berhasil mengupgrade aplikasi dengan ukuran lebih kecil dan cepat!

Anda telah menggunakan paket compat untuk mengupgrade aplikasi sepotong demi sepotong, dan menggunakan Firestore Lite untuk mempercepat rendering halaman awal, lalu memuat Firestore utama secara dinamis untuk menstreaming perubahan harga.

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

main.js

ukuran resource (kb)

ukuran file gzip (kb)

waktu muat (dtk) (lebih dari 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

Kini Anda telah 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