TIL 2021-11-22 Firebase 9, webpack-bundle-analyzer

기존에 Firebase 8을 사용하고 잇었는데,

 

Firsebase 9에 들어와서 클래스기반이었던 라이브러리가 Modular 기반으로 바뀌어 Treeshaking에 많은 이점을 가져갈수 있게되었다.

 

이를 번들 분석을 해주는 webpack-bundle-analyzer를 사용하여 비교하여 보려고 하였으나...

 

기존 번들의 스크린샷을 제대로 안찍었었다.

 

기억하기로는 parsed된 이후로 1.47mb정도였던 것 같다.

 

Firebase 9을 적용한 이유의 번들은 690kb정도로 거의 700kb가량 감소한 것이다.

 

 

 

또한 실시간 업데이트를 하지 않는 경우에는 더욱더 가벼운 Firebase Lite를 사용해도 무방한데,  이를 적용했을떄는

 

기존에 비해서는 거의 900kb,

 

그냥 Firebase 9과 비교하면 140kb정도 더 감소시킬수 있었다.

 

단순히 단일 라이브러리를 제대로 트리 세이킹하여서 900kb의 용량을 줄일수 있는게 참 인상깊다.

 

클래스로 하면 트리 세이킹이 어렵다는 사실 또한 처음 알게 되었다!

 

 

그리고 실제 접속했을떄 request되는 용량을 비교해보았을때,

resource는 600kb, 전송량은 150kb가량 감소시킬수 있었다.

 

Firebase 9에서 바뀐점을 간단히 보자면

 

 

 

Firebase 8 데이터 쓰기

 

db.collection("users").add({
    first: "Alan",
    middle: "Mathison",
    last: "Turing",
    born: 1912
})
.then((docRef) => {
    console.log("Document written with ID: ", docRef.id);
})
.catch((error) => {
    console.error("Error adding document: ", error);
});

Firebase 9 데이터 쓰기

import { addDoc, collection } from "firebase/firestore";

try {
  const docRef = await addDoc(collection(db, "users"), {
    first: "Alan",
    middle: "Mathison",
    last: "Turing",
    born: 1912
  });

  console.log("Document written with ID: ", docRef.id);
} catch (e) {
  console.error("Error adding document: ", e);
}

 

 

Firebase 8 데이터 읽기

db.collection("users").get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        console.log(`${doc.id} => ${doc.data()}`);
    });
});

Firebase 9 데이터 읽기

import { collection, getDocs } from "firebase/firestore";

const querySnapshot = await getDocs(collection(db, "users"));
querySnapshot.forEach((doc) => {
  console.log(`${doc.id} => ${doc.data()}`);
});

기능들이 함수로 나누어져 있어서 훨씬 async/await하기 깔끔하게 바뀌었다