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
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
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
- Dengan IDE, buka atau impor direktori
codelab-modular-sdk
. - Jalankan
npm install
untuk menginstal dependensi yang diperlukan untuk mem-build dan menjalankan aplikasi secara lokal. - Jalankan
npm run build
untuk mem-build aplikasi. - Jalankan
npm run serve
untuk memulai server web - Buka tab browser di http://localhost:8080
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:
- Login secara anonim menggunakan tombol login di sudut kanan atas.
- 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.
- Hapus saham dari daftar pantau dengan mengklik x di akhir baris.
- Lihat info terbaru harga saham secara real-time.
- 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
.
- 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.
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:
- Buka file
src/firebase.ts
- 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
- Jalankan
npm run build
untuk mem-build ulang aplikasi. - Buka tab browser di http://localhost:8080 , atau muat ulang tab yang ada.
- 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
- Buka file
src/firebase.ts
- Tambahkan impor berikut:
src/firebase.ts
import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';
- Hapus
import ‘firebase/compat/auth'.
- Ganti
export const firebaseAuth = app.auth();
dengan:
src/firebase.ts
export const firebaseAuth = initializeAuth(app, { persistence: [indexedDBLocalPersistence] });
- Hapus
export type User = firebase.User;
di akhir file.User
akan diekspor langsung disrc/auth.ts
yang akan Anda ubah berikutnya.
Memperbarui Kode auth
- Buka file
src/auth.ts
- Tambahkan impor berikut ke bagian atas file:
src/auth.ts
import {
signInAnonymously,
signOut,
onAuthStateChanged,
User
} from 'firebase/auth';
- Hapus
User
dariimport { firebaseAuth, User } from './firebase';
karena Anda telah mengimporUser
dari‘firebase/auth'.
- 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
- Jalankan
npm run build
untuk mem-build ulang aplikasi. - Buka tab browser ke http://localhost:8080 , atau muat ulang tab yang ada
- Mainkan aplikasi. Semuanya akan tetap berfungsi.
Memeriksa ukuran paket
- Buka Chrome DevTools.
- Beralihlah ke tab Jaringan.
- Muat ulang halaman untuk merekam permintaan jaringan.
- 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.
6. Mengupgrade Aplikasi Firebase dan Firestore untuk menggunakan API modular
Memperbarui inisialisasi Firebase
- Buka file
src/firebase.ts.
- Ganti
import firebase from ‘firebase/compat/app';
dengan:
src/firebase.ts
import { initializeApp } from 'firebase/app';
- 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
- Dalam file yang sama
src/firebase.ts,
, gantiimport 'firebase/compat/firestore';
dengan
src/firebase.ts
import { getFirestore } from 'firebase/firestore';
- Ganti
export const firestore = app.firestore();
dengan:
src/firebase.ts
export const firestore = getFirestore();
- Menghapus semua baris setelah "
export const firestore = ...
"
Memperbarui impor
- Buka file
src/services.ts.
- Hapus
FirestoreFieldPath
,FirestoreFieldValue
, danQuerySnapshot
dari impor. Impor dari'./firebase'
kini akan terlihat seperti berikut:
src/services.ts
import { firestore } from './firebase';
- 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';
Memperbarui search()
- Buat referensi ke koleksi yang berisi semua ticker:
src/services.ts
const tickersCollRef = collection(firestore, 'current');
- 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()
- Gunakan
doc()
untuk membuat referensi dokumen ke daftar tontonan pengguna terlebih dahulu, lalu memproses perubahan daftar tontonan menggunakanonSnapshot()
:
src/services.ts
const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
const unsubscribe = onSnapshot(watchlistRef, snapshot => {
/* subscribe to ticker price changes */
});
- Setelah memiliki ticker di daftar pantau, gunakan
query()
untuk membuat kueri guna mengambil harganya dan gunakanonSnapshot()
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
- Jalankan
npm run build
untuk mem-build ulang aplikasi. - Buka tab browser ke http://localhost:8080 , atau muat ulang tab yang ada
- Mainkan aplikasi. Semuanya akan tetap berfungsi.
Memeriksa ukuran paket
- Buka Chrome DevTools.
- Beralihlah ke tab Jaringan.
- Muat ulang halaman untuk merekam permintaan jaringan.
- 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.
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:
- Pindahkan layanan real-time ke file terpisah, sehingga dapat dimuat secara dinamis menggunakan impor dinamis.
- Buat fungsi baru untuk menggunakan Firestore Lite guna mengambil daftar pantauan dan harga saham.
- 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
- Buat file baru bernama
src/services.realtime.ts.
- Pindahkan fungsi
subscribeToTickerChanges()
dansubscribeToAllTickerChanges()
darisrc/services.ts
ke file baru. - Tambahkan impor yang diperlukan ke bagian atas file baru.
Anda masih perlu melakukan beberapa perubahan di sini:
- 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. - 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
- Buka
src/services.ts.
- Ubah jalur impor dari
‘firebase/firestore'
menjadi‘firebase/firestore/lite',
, tambahkangetDoc
, dan hapusonSnapshot
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';
- 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);
}
- 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
- Buka
src/main.ts.
- 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';
- Muat
src/services.realtime
menggunakan impor dinamis di bagian atas file. VariabelloadRealtimeService
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);
});
- Ubah callback
onUserChange()
menjadi fungsiasync
, sehingga kita dapat menggunakanawait
dalam isi fungsi:
src/main.ts
onUserChange(async user => {
// callback body
});
- 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
}
}
- 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
- Jalankan
npm run build
untuk mem-build ulang aplikasi. - Buka tab browser ke http://localhost:8080 , atau muat ulang tab yang ada.
Memeriksa ukuran paket
- Buka Chrome DevTools.
- Beralihlah ke tab Jaringan.
- Muat ulang halaman untuk merekam permintaan jaringan
- Cari
main.js
dan periksa ukurannya. - 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.
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 |
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.