如何在不牺牲实时能力的前提下减小Firebase SDK打包体积？

你当前引入的标准firebase/firestore入口默认打包了离线持久化、本地索引维护、全量数据校验等完整逻辑，275kb是该入口的常规未压缩体积，可通过以下方式在不损失实时监听能力的前提下压缩体积：

• 替换默认持久化缓存为内存缓存，摇掉冗余代码
  标准Firestore默认开启IndexedDB离线持久化能力，如果你不需要前端离线可用的特性，可以在初始化时显式指定内存缓存，配合tree-shaking移除持久化相关的约100kb无用代码：

  import { initializeApp } from 'firebase/app'
  import { 
    initializeFirestore, 
    memoryLocalCache, 
    collection, 
    onSnapshot, 
    query, 
    where, 
    orderBy 
  } from 'firebase/firestore'
  
  const firebaseApp = initializeApp(firebaseConfig)
  // 替换原来的getFirestore调用，指定内存缓存
  const db = initializeFirestore(firebaseApp, {
    localCache: memoryLocalCache()
  })
  
  const documents = ref(null)
  const listQuery = query(collection(db, 'documents'), where(`something`, '==', 'something'), orderBy('createdAt', 'desc'))
  
  const unsub = onSnapshot(listQuery, (snap) => {
    let results = []
    snap.docs.forEach(el => {
      el.data().createdAt && results.push({ ...el.data(), id: el.id })
    })
    documents.value = results
  }, err => {
    console.log(err.message)
    documents.value = null
  })
  

  调整后未压缩的包体积可以降到150kb左右。

• 确认打包工具正确加载ESM版本的SDK
  部分打包工具如果优先解析到CommonJS版本的Firebase SDK，会导致tree-shaking完全失效。如果你用Webpack，需要确认resolve.mainFields配置中module字段优先级高于main；Vite、Rollup等原生ESM构建工具默认不需要额外调整。

• 开启构建压缩与代码分割

  • 生产构建开启gzip/brotli压缩后，上述调整后的Firebase相关代码体积可以降到40-50kb，属于正常可接受范围
  • 将Firebase相关逻辑拆分为独立的异步代码块，仅在使用实时能力的页面加载，避免阻塞首屏资源加载

注意不要盲目替换为firebase/firestore/lite入口，该入口虽然体积更小（gzip后约30kb），但不支持onSnapshot实时监听，所有查询均为一次性请求，无法满足你的实时性需求。

内容的提问来源于stack exchange，提问作者whit3.oc7opus