Tăng cường ứng dụng web của bạn bằng cách di chuyển sang SDK Firebase JS dạng mô-đun

1. Trước khi bạn bắt đầu

SDK JS Firebase mô-đun là bản viết lại của SDK JS hiện có và sẽ được phát hành dưới dạng phiên bản chính tiếp theo. Nó cho phép các nhà phát triển loại trừ mã không sử dụng khỏi SDK Firebase JS để tạo các gói nhỏ hơn và đạt được hiệu suất tốt hơn.

Sự khác biệt đáng chú ý nhất trong SDK JS mô-đun là các tính năng hiện được sắp xếp theo các hàm nổi miễn phí mà bạn sẽ nhập, thay vì trong một không gian tên firebase duy nhất bao gồm mọi thứ. Cách tổ chức mã mới này cho phép rung cây và bạn sẽ tìm hiểu cách nâng cấp bất kỳ ứng dụng nào hiện đang sử dụng SDK Firebase JS v8 lên ứng dụng mô-đun mới.

Để cung cấp quá trình nâng cấp suôn sẻ, một bộ gói tương thích được cung cấp. Trong lớp học lập trình này, bạn sẽ tìm hiểu cách sử dụng các gói tương thích để chuyển từng ứng dụng một.

Những gì bạn sẽ xây dựng

Trong lớp học lập trình này, bạn sẽ dần dần di chuyển một ứng dụng web danh sách theo dõi chứng khoán hiện có sử dụng SDK JS v8 sang SDK JS mô-đun mới theo ba giai đoạn:

  • Nâng cấp ứng dụng để sử dụng các gói tương thích
  • Nâng cấp từng phần ứng dụng từ các gói tương thích lên API mô-đun
  • Sử dụng Firestore Lite, một triển khai nhẹ của Firestore SDK, để cải thiện hơn nữa hiệu suất của ứng dụng

2d351cb47b604ad7.png

Lớp học lập trình này tập trung vào việc nâng cấp SDK Firebase. Các khái niệm và khối mã khác được trình bày rõ ràng và được cung cấp để bạn chỉ cần sao chép và dán.

Những gì bạn cần

  • Trình duyệt bạn chọn, chẳng hạn như Chrome
  • Trình soạn thảo IDE/văn bản bạn chọn, chẳng hạn như WebStorm , Atom , Sublime hoặc VS Code
  • Trình quản lý gói npm , thường đi kèm với Node.js
  • Mã mẫu của lớp học lập trình (Xem bước tiếp theo của lớp học lập trình để biết cách lấy mã.)

2. Thiết lập

Lấy mã

Mọi thứ bạn cần cho dự án này đều nằm trong kho Git. Để bắt đầu, bạn cần lấy mã và mở nó trong môi trường nhà phát triển yêu thích của mình.

Sao chép kho lưu trữ Github của lớp học lập trình từ dòng lệnh:

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

Ngoài ra, nếu bạn chưa cài đặt git, bạn có thể tải xuống kho lưu trữ dưới dạng tệp ZIP và giải nén tệp zip đã tải xuống.

Nhập ứng dụng

  1. Sử dụng IDE của bạn để mở hoặc nhập thư mục codelab-modular-sdk .
  2. Chạy npm install để cài đặt các phần phụ thuộc cần thiết nhằm xây dựng và chạy ứng dụng cục bộ.
  3. Chạy npm run build để xây dựng ứng dụng.
  4. Chạy npm run serve để khởi động máy chủ web
  5. Mở tab trình duyệt tới http://localhost:8080

71a8a7d47392e8f4.png

3. Thiết lập đường cơ sở

Điểm khởi đầu của bạn là gì?

Điểm khởi đầu của bạn là một ứng dụng danh sách theo dõi chứng khoán được thiết kế cho lớp học lập trình này. Mã đã được đơn giản hóa để minh họa các khái niệm trong lớp học lập trình này và có rất ít lỗi xử lý. Nếu bạn chọn sử dụng lại bất kỳ mã nào trong số này trong ứng dụng sản xuất, hãy đảm bảo rằng bạn xử lý mọi lỗi và kiểm tra đầy đủ tất cả mã.

Đảm bảo mọi thứ hoạt động trong ứng dụng:

  1. Đăng nhập ẩn danh bằng nút đăng nhập ở góc trên bên phải.
  2. Sau khi đăng nhập, tìm kiếm và thêm "NFLX", "SBUX" và "T" vào danh sách theo dõi bằng cách nhấp vào nút Thêm , nhập các chữ cái và nhấp vào hàng kết quả tìm kiếm bật lên bên dưới.
  3. Xóa cổ phiếu khỏi danh sách theo dõi bằng cách nhấp vào x ở cuối hàng.
  4. Xem thông tin cập nhật theo thời gian thực về giá cổ phiếu.
  5. Mở Chrome DevTools, chuyển đến tab Mạng và chọn Tắt bộ đệm và Sử dụng hàng yêu cầu lớn . Tắt bộ đệm để đảm bảo chúng tôi luôn nhận được những thay đổi mới nhất sau khi làm mới và Sử dụng các hàng yêu cầu lớn làm cho hàng hiển thị cả kích thước được truyền và kích thước tài nguyên cho một tài nguyên. Trong lớp học lập trình này, chúng ta chủ yếu quan tâm đến kích thước của main.js .

48a096debb2aa940.png

  1. Tải ứng dụng trong các điều kiện mạng khác nhau bằng cách sử dụng điều chỉnh mô phỏng. Bạn sẽ sử dụng 3G chậm để đo thời gian tải trong lớp học lập trình này vì kích thước gói nhỏ hơn sẽ giúp ích nhiều nhất.

4397cb2c1327089.png

Bây giờ hãy bắt đầu di chuyển ứng dụng sang API mô-đun mới.

4. Sử dụng các gói tương thích

Các gói tương thích cho phép bạn nâng cấp lên phiên bản SDK mới mà không cần thay đổi tất cả mã Firebase cùng một lúc. Bạn có thể nâng cấp chúng lên API mô-đun dần dần.

Ở bước này, bạn sẽ nâng cấp thư viện Firebase từ v8 lên phiên bản mới và thay đổi mã để sử dụng các gói tương thích. Trong các bước sau, bạn sẽ tìm hiểu cách chỉ nâng cấp mã Firebase Auth để sử dụng API mô-đun trước, sau đó nâng cấp mã Firestore.

Ở cuối mỗi bước, bạn sẽ có thể biên dịch và chạy ứng dụng mà không bị hỏng, đồng thời thấy kích thước gói giảm khi chúng tôi di chuyển từng sản phẩm.

Nhận SDK mới

Tìm phần phụ thuộc trong package.json và thay thế bằng phần sau:

gói.json

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

Cài đặt lại các phụ thuộc

Vì chúng tôi đã thay đổi phiên bản của phần phụ thuộc nên chúng tôi cần chạy lại npm install để có phiên bản mới của phần phụ thuộc.

Thay đổi đường dẫn nhập

Các gói tương thích được hiển thị trong mô-đun con firebase/compat , vì vậy chúng tôi sẽ cập nhật đường dẫn nhập tương ứng:

  1. Đi tới tệp src/firebase.ts
  2. Thay thế các mục nhập hiện có bằng các mục nhập sau:

src/firebase.ts

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

Xác minh ứng dụng hoạt động

  1. Chạy npm run build để xây dựng lại ứng dụng.
  2. Mở tab trình duyệt tới http://localhost:8080 hoặc làm mới tab hiện có.
  3. Chơi với ứng dụng. Mọi thứ vẫn nên hoạt động.

5. Nâng cấp Auth để sử dụng API mô-đun

Bạn có thể nâng cấp các sản phẩm Firebase theo bất kỳ thứ tự nào. Trong lớp học lập trình này, trước tiên bạn sẽ nâng cấp Auth để tìm hiểu các khái niệm cơ bản vì API Auth tương đối đơn giản. Việc nâng cấp Firestore phức tạp hơn một chút và bạn sẽ học cách thực hiện điều đó tiếp theo.

Cập nhật khởi tạo Auth

  1. Đi tới tệp src/firebase.ts
  2. Thêm phần nhập sau:

src/firebase.ts

import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';
  1. Xóa import 'firebase/compat/auth'.
  2. Thay thế export const firebaseAuth = app.auth(); với:

src/firebase.ts

export const firebaseAuth = initializeAuth(app, { persistence: [indexedDBLocalPersistence] });
  1. Xóa export type User = firebase.User; ở cuối tập tin. User sẽ được xuất trực tiếp trong src/auth.ts mà bạn sẽ thay đổi tiếp theo.

Cập nhật mã xác thực

  1. Đi tới tệp src/auth.ts
  2. Thêm phần nhập sau vào đầu tệp:

src/auth.ts

import { 
    signInAnonymously, 
    signOut,
    onAuthStateChanged,
    User
} from 'firebase/auth';
  1. Xóa User khỏi import { firebaseAuth, User } from './firebase'; vì bạn đã nhập User từ 'firebase/auth'.
  2. Cập nhật các chức năng để sử dụng API mô-đun.

Như bạn đã thấy trước đó khi chúng tôi cập nhật câu lệnh nhập, các gói trong phiên bản 9 được sắp xếp xung quanh các hàm mà bạn có thể nhập, trái ngược với các API phiên bản 8 dựa trên không gian tên chuỗi dấu chấm và mẫu dịch vụ. Chính cách tổ chức mã mới này cho phép loại bỏ các mã không được sử dụng theo cây vì nó cho phép các công cụ xây dựng phân tích mã nào được sử dụng và mã nào không.

Trong phiên bản 9, các dịch vụ được chuyển làm đối số đầu tiên cho các hàm. Dịch vụ là đối tượng bạn nhận được từ việc khởi tạo dịch vụ Firebase, ví dụ: đối tượng được trả về từ getAuth() hoặc initializeAuth() . Chúng giữ trạng thái của một dịch vụ Firebase cụ thể và hàm này sử dụng trạng thái đó để thực hiện các nhiệm vụ của mình. Hãy áp dụng mẫu này để thực hiện các chức năng sau:

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

Xác minh ứng dụng hoạt động

  1. Chạy npm run build để xây dựng lại ứng dụng.
  2. Mở tab trình duyệt tới http://localhost:8080 hoặc làm mới tab hiện có
  3. Chơi với ứng dụng. Mọi thứ vẫn nên hoạt động.

Kiểm tra kích thước gói

  1. Mở Công cụ dành cho nhà phát triển Chrome.
  2. Chuyển sang tab Mạng .
  3. Làm mới trang để nắm bắt các yêu cầu mạng.
  4. Hãy tìm main.js và kiểm tra kích thước của nó. Bạn đã giảm kích thước gói xuống 100KB (được nén bằng 36 KB) hoặc nhỏ hơn khoảng 22% bằng cách chỉ thay đổi một vài dòng mã! Trang web cũng tải nhanh hơn 0,75 giây trên kết nối 3g chậm.

2e4eafaf66cd829b.png

6. Nâng cấp Ứng dụng Firebase và Firestore để sử dụng API mô-đun

Cập nhật khởi tạo Firebase

  1. Đi tới tệp src/firebase.ts.
  2. Thay thế import firebase from 'firebase/compat/app'; với:

src/firebase.ts

import { initializeApp } from 'firebase/app';
  1. Thay thế const app = firebase.initializeApp({...}); với:

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

Cập nhật khởi tạo Firestore

  1. Trong cùng một tệp src/firebase.ts, thay thế import 'firebase/compat/firestore'; với

src/firebase.ts

import { getFirestore } from 'firebase/firestore';
  1. Thay thế export const firestore = app.firestore(); với:

src/firebase.ts

export const firestore = getFirestore();
  1. Xóa tất cả các dòng sau " export const firestore = ... "

Cập nhật nhập khẩu

  1. Mở tệp src/services.ts.
  2. Xóa FirestoreFieldPath , FirestoreFieldValue và QuerySnapshot khỏi quá trình nhập. Quá trình nhập từ './firebase' bây giờ sẽ trông giống như sau:

src/services.ts

import { firestore } from './firebase';
  1. Nhập các hàm và loại bạn sẽ sử dụng ở đầu tệp:
    **src/services.ts**

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove, 
    onSnapshot, 
    query, 
    where, 
    documentId, 
    QuerySnapshot
} from 'firebase/firestore';
  1. Tạo một tham chiếu đến bộ sưu tập chứa tất cả các mã:

src/services.ts

const tickersCollRef = collection(firestore, 'current');
  1. Sử dụng getDocs() để tìm nạp tất cả tài liệu từ bộ sưu tập:

src/services.ts

const tickers = await getDocs(tickersCollRef);

Xem search() để biết mã đã hoàn thành.

Cập nhật addToWatchList()

Sử dụng doc() để tạo tham chiếu tài liệu đến danh sách theo dõi của người dùng, sau đó thêm mã đánh dấu vào danh sách đó bằng cách sử dụng setDoc() với 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 });
}

Cập nhật xóaFromWatchList()

Tương tự, xóa mã đánh dấu khỏi danh sách theo dõi của người dùng bằng cách sử dụng setDoc() với 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 });
}

Cập nhật subscribeToTickerChanges()

  1. Trước tiên, hãy sử dụng doc() để tạo tham chiếu tài liệu cho danh sách theo dõi của người dùng, sau đó lắng nghe các thay đổi của danh sách theo dõi bằng cách sử dụng onSnapshot() :

src/services.ts

const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
const unsubscribe = onSnapshot(watchlistRef, snapshot => {
   /* subscribe to ticker price changes */
});
  1. Sau khi bạn có các mã trong danh sách theo dõi, hãy sử dụng query() để tạo truy vấn tìm nạp giá của chúng và sử dụng onSnapshot() để nghe những thay đổi về giá của chúng:

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

Xem subscribeToTickerChanges() để biết cách triển khai đầy đủ.

Cập nhật subscribeToAllTickerChanges()

Trước tiên, bạn sẽ sử dụng collection() để tạo tham chiếu đến bộ sưu tập chứa giá cho tất cả các mã báo trước, sau đó sử dụng onSnapshot() để lắng nghe sự thay đổi về giá:

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

Xác minh ứng dụng hoạt động

  1. Chạy npm run build để xây dựng lại ứng dụng.
  2. Mở tab trình duyệt tới http://localhost:8080 hoặc làm mới tab hiện có
  3. Chơi với ứng dụng. Mọi thứ vẫn nên hoạt động.

Kiểm tra kích thước gói

  1. Mở Công cụ dành cho nhà phát triển Chrome.
  2. Chuyển sang tab Mạng .
  3. Làm mới trang để nắm bắt các yêu cầu mạng.
  4. Hãy tìm main.js và kiểm tra kích thước của nó. So sánh lại với kích thước gói ban đầu - chúng tôi đã giảm kích thước gói hơn 200KB (63,8 KB được nén bằng gzipped) hoặc nhỏ hơn 50%, nghĩa là thời gian tải nhanh hơn 1,3 giây!

7660cdc574ee8571.png

7. Sử dụng Firestore Lite để tăng tốc độ hiển thị trang ban đầu

Firestore Lite là gì?

SDK Firestore cung cấp bộ nhớ đệm phức tạp, phát trực tuyến theo thời gian thực, lưu trữ liên tục, đồng bộ hóa ngoại tuyến nhiều tab, thử lại, đồng thời lạc quan, v.v. và do đó có kích thước khá lớn. Nhưng bạn có thể chỉ muốn lấy dữ liệu một lần mà không cần bất kỳ tính năng nâng cao nào. Đối với những trường hợp đó, Firestore đã tạo ra một giải pháp đơn giản và nhẹ nhàng, một gói hoàn toàn mới — Firestore Lite.

Một trường hợp sử dụng tuyệt vời của Firestore Lite là tối ưu hóa hiệu suất hiển thị trang ban đầu, trong đó bạn chỉ cần biết người dùng có đăng nhập hay không, sau đó đọc một số dữ liệu từ Firetore để hiển thị.

Trong bước này, bạn sẽ tìm hiểu cách sử dụng Firestore lite để giảm kích thước gói nhằm tăng tốc độ hiển thị trang ban đầu, sau đó tải động SDK Firestore chính để đăng ký nhận các bản cập nhật theo thời gian thực.

Bạn sẽ cấu trúc lại mã thành:

  1. Di chuyển các dịch vụ thời gian thực sang một tệp riêng biệt để chúng có thể được tải động bằng cách sử dụng tính năng nhập động.
  2. Tạo các chức năng mới để sử dụng Firestore Lite để truy xuất danh sách theo dõi và giá cổ phiếu.
  3. Sử dụng các chức năng Firestore Lite mới để truy xuất dữ liệu nhằm thực hiện hiển thị trang ban đầu, sau đó tải động các dịch vụ thời gian thực để nghe các bản cập nhật theo thời gian thực.

Di chuyển các dịch vụ thời gian thực sang một tệp mới

  1. Tạo một tệp mới có tên src/services.realtime.ts.
  2. Di chuyển các hàm subscribeToTickerChanges() và subscribeToAllTickerChanges() từ src/services.ts vào tệp mới.
  3. Thêm các mục nhập cần thiết vào đầu tệp mới.

Bạn vẫn cần thực hiện một số thay đổi ở đây:

  1. Đầu tiên, tạo một phiên bản Firestore từ SDK Firestore chính ở đầu tệp sẽ được sử dụng trong hàm. Bạn không thể nhập phiên bản Firestore từ firebase.ts tại đây vì bạn sẽ thay đổi nó thành phiên bản Firestore Lite sau một vài bước. Phiên bản này sẽ chỉ được sử dụng để hiển thị trang ban đầu.
  2. Thứ hai, loại bỏ biến firstload và khối if được nó bảo vệ. Các chức năng của chúng sẽ được chuyển sang các chức năng mới mà bạn sẽ tạo ở bước tiếp theo.

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

Sử dụng Firestore lite để lấy dữ liệu

  1. Mở src/services.ts.
  2. Thay đổi đường dẫn nhập từ 'firebase/firestore' thành 'firebase/firestore/lite', thêm getDoc và xóa onSnapshot khỏi danh sách nhập :

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. Thêm các chức năng để tìm nạp dữ liệu cần thiết cho việc hiển thị trang ban đầu bằng 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. Mở src/firebase.ts và thay đổi đường dẫn nhập từ 'firebase/firestore' thành 'firebase/firestore/lite':

src/firebase.ts

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

Buộc tất cả chúng lại với nhau

  1. Mở src/main.ts.
  2. Bạn sẽ cần các hàm mới được tạo để tìm nạp dữ liệu cho quá trình hiển thị trang ban đầu và một số hàm trợ giúp để quản lý trạng thái ứng dụng. Vì vậy, bây giờ hãy cập nhật hàng nhập:

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. Tải src/services.realtime bằng cách sử dụng tính năng nhập động ở đầu tệp. Biến loadRealtimeService là một lời hứa sẽ giải quyết bằng các dịch vụ thời gian thực sau khi mã được tải. Bạn sẽ sử dụng nó sau này để đăng ký nhận các bản cập nhật theo thời gian thực.

src/main.ts

const loadRealtimeService = import('./services.realtime');
loadRealtimeService.then(() => {
   setRealtimeServicesLoaded(true);
});
  1. Thay đổi lệnh gọi lại của onUserChange() thành hàm async để chúng ta có thể sử dụng await trong thân hàm:

src/main.ts

onUserChange(async user => {
 // callback body
});
  1. Bây giờ hãy tìm nạp dữ liệu để hiển thị trang ban đầu bằng cách sử dụng các hàm mới mà chúng tôi đã tạo ở bước trước.

Trong lệnh gọi lại onUserChange() , hãy tìm điều kiện if mà người dùng đã đăng nhập rồi sao chép và dán mã bên trong câu lệnh 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. Trong khối khác nơi không có người dùng nào đăng nhập, tìm nạp thông tin giá cho tất cả cổ phiếu bằng firestore lite, hiển thị trang, sau đó lắng nghe thay đổi giá sau khi tải dịch vụ thời gian thực:

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

Xem src/main.ts để biết mã hoàn chỉnh.

Xác minh ứng dụng hoạt động

  1. Chạy npm run build để xây dựng lại ứng dụng.
  2. Mở tab trình duyệt tới http://localhost:8080 hoặc làm mới tab hiện có.

Kiểm tra kích thước gói

  1. Mở Công cụ dành cho nhà phát triển Chrome.
  2. Chuyển sang tab Mạng .
  3. Làm mới trang để nắm bắt các yêu cầu mạng
  4. Hãy tìm main.js và kiểm tra kích thước của nó.
  5. Bây giờ nó chỉ còn 115KB (đã nén 34,5KB). Nhỏ hơn 75% so với kích thước gói ban đầu là 446KB (đã nén 138KB)! Kết quả là trang web tải nhanh hơn 2 giây trên kết nối 3G - một cải thiện hiệu suất và trải nghiệm người dùng tuyệt vời!

9ea7398a8c8ef81b.png

8. Xin chúc mừng

Xin chúc mừng, bạn đã nâng cấp thành công ứng dụng và làm cho nó nhỏ hơn và nhanh hơn!

Bạn đã sử dụng các gói tương thích để nâng cấp từng phần ứng dụng và sử dụng Firestore Lite để tăng tốc độ hiển thị trang ban đầu, sau đó tải động Firestore chính để truyền tải các thay đổi về giá.

Bạn cũng đã giảm kích thước gói và cải thiện thời gian tải trong suốt lớp học lập trình này:

main.js

kích thước tài nguyên (kb)

kích thước được nén (kb)

thời gian tải (trên 3g chậm)

v8

446

138

4,92

tương thích v9

429

124

4,65

v9 chỉ xác thực theo mô-đun

348

102

4.2

v9 hoàn toàn theo mô-đun

244

74,6

3,66

v9 đầy đủ mô-đun + Firestore lite

117

34,9

2,88

32a71bd5a774e035.png

Bây giờ bạn đã biết các bước chính cần thiết để nâng cấp ứng dụng web sử dụng SDK JS Firebase v8 để sử dụng SDK JS mô-đun mới.

đọc thêm

Tài liệu tham khảo