firestore jsを使うときはなるべく軽量版のLiteを使うとパフォーマンス的にいいゾ

こんにちは。[virapture株式会社](https://virapture.com)でCEOしながら[ラグナロク株式会社](https://ragna-rock.com)でもCKOとして働いている[もぐめっと](https://mogmet.com)です。
![スクリーンショット 2022-07-13 10.52.12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/abcd390c-6c3d-17e8-536b-6f730691f84b.jpeg)
BBQの時期になりましたのでお肉やいてました。屋外でしたが火が近いせいでめちゃくちゃ暑かったです。

本日はfirestore/liteなるものを知ったのでどんなもんかと検証してみた記事になります。

firestore/liteについて説明した後に検証結果を発表させていただきます。

## firestore/liteについて

v9になってバンドルサイズが削減されたのは有名なお話ですが、実はさらなる削減としてfirestore/liteというものを使うともっと削減できます。
どれくらい削減されるかのサイズ検証は下記記事をご参照ください。

https://miyauchi.dev/ja/posts/firebase-bundle-size/

https://qiita.com/qrusadorz/items/166aa1948dca8bd046a0

一応公式では84%削減すると謳っています。

https://firebase.blog/posts/2021/07/introducing-the-new-firebase-js-sdk#a-lightweight-rest-based-api

どうやって実装すればいいかですが、それは簡単です。
`import {getDoc} from firebase/firestore`とかしていたのを`import {getDoc} from firebase/firestore/lite`に変えるだけ！めちゃくちゃお手軽！

https://firebase.google.com/docs/firestore/solutions/firestore-lite

### デメリット

めちゃくちゃ軽いし実装もお手軽だしいいじゃんと思いますが、トラップもあるのでご注意ください。
Liteでは下記の機能が**提供されていません。**

https://firebase.google.com/docs/firestore/solutions/firestore-lite#api_features_not_supported_by_firestore_lite

> - **DocumentSnapshotイベントハンドラー。** onSnapshotメソッドとDocumentChange 、 SnapshotListenerOptions 、 SnapshotMetadata 、 SnapshotOptions 、およびUnsubscribeオブジェクトは含まれていません。
> - **永続性ヘルパー。** enableIndexedDBPersistence 、 enableMultiTabIndexedDbPersistence 、およびclearIndexedDbPersistenceメソッドは含まれていません。
> - **Firestoreバンドル。** loadBundleメソッドと関連メソッド、およびLoadBundleTaskオブジェクトとLoadBundleTaskProgressオブジェクトは含まれていません。

しかし、逆に言うならばこれらの機能を使わなくても表現できるなら積極的にliteを使っていこうということになります！

## パフォーマンス検証

ではどれだけパフォーマンスがよくなったのかをcore web vitalsを使って検証してみます。

検証用としてarticlesコレクションから取得して表示するだけのページをnuxt3で作ってみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/5bf9e62d-1a2a-672e-6322-3f401c1e7735.png)


ページのソースはこんなかんじ
```app.vue
<script setup lang="ts">
type Article = {
  title:string,
  body:string,
}
type Articles = Array<Article>
const articles = ref<Articles>([])
const {GetArticles} = useFirestore()
articles.value = await GetArticles()
</script>

<template>
  <div>
    <div v-for="article in articles" :key="article.id">
      <span>{{ article.title }}:</span>
      <span>{{ article.body }}</span>
    </div>
  </div>
</template>

```

他の細かいところはリポジトリを参照してください。

https://github.com/mogmet/firestore-lite-sample

web vitalsを使って検証してみた結果がこちらになります。

|Before（liteを使わない）|After（liteを使用）|
|-|-|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/38f63f5b-cf12-255b-30d2-34ddf0aa2d02.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/2804ddbe-3e1b-2479-c0b9-198d1493a78b.png)|

[Largest Contentful Paint](https://web.dev/i18n/ja/lcp/)（ページの読み込みタイムラインにおいてページのメインコンテンツが読み込まれたと思われる時点を示すもの）が1.273s → **0.416s** と3倍近くパフォーマンスが良くなりました！！！！！
すごい！！！！！

## まとめ

**firestore/liteで読み込んだほうがパフォーマンスがいい！！！！！！！！！！！！！！**

実は結構前からfirestore/liteはリリースされていたのですが全然知りませんでした・・・
今後は積極的に使っていこうかと思います。

最後に、[ワンナイト人狼オンライン](https://online.1nite-jinro.com/link/blog)というゲームを作ってます！よかったら遊んでね！

https://online.1nite-jinro.com/link/blog

他にも[Camecon](https://camecon.me/)や[Offcha](https://offcha.com/)、問い合わせ対応が簡単にできる[CSmart](https://csmart.jp/lp)といったサービスも作ってるのでよかったら使ってね！

https://camecon.me/

https://offcha.com/

https://csmart.jp/lp

また、チームビルディングや技術顧問、Firebaseの設計やアドバイスといったお話も受け付けてますので御用の方は弊社までお問い合わせください。

https://virapture.com/

ラグナロクでもエンジニアやデザイナーのメンバーを募集しています！！楽しくぶち上げたい人はぜひお話ししましょう！！

https://ragna-rock.com