如何减少firebase包的大小？

Question

我正在构建我的应用程序以部署到生产环境。我的客户端捆绑代码由库拆分。

我注意到 firebase 产生了相当大的块。

它是 667kb，如下所示：

这是我在我的代码中导入它的方式：

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/functions';
import 'firebase/storage';

// .env file in root folder
const config = {
  apiKey: process.env.FIREBASE_APP_API_KEY,
  authDomain: process.env.FIREBASE_APP_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_APP_DATABASE_URL,
  projectId: process.env.FIREBASE_APP_PROJECT_ID,
  storageBucket: process.env.FIREBASE_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_APP_MESSAGING_SENDER_ID
};

firebase.initializeApp(config);

有没有办法减少它？

Webpack 总是警告这个块大小。

Answer 1

聚会有点晚，但解决包大小的一种潜在方法是动态导入 firestore。

事实证明firebase.firestore，undefined如果您尚未将其导入模块。这意味着您可以确保它只导入一次并导出一个将返回 firestore 实例的异步函数。

// firebase.js
export async function getFirestoreInstance() {
  if (!firebase.firestore) {
    await import('firebase/firestore');
  }

  return firebase.firestore();
}

// Other file that needs firestore
async function doSomething(){
  const firestore = await getFirestoreInstance();
  firestore.collection('do stuff')
}

我还没有在生产中对此进行测试，但它似乎在使用 React & NextJS 的开发中运行良好。我会更新一次。

Answer 2

firebase-js-sdk 存储库中有一个活跃的问题：https : //github.com/firebase/firebase-js-sdk/issues/2241。目前没有那么多事情可以做。

如果你不需要一些像实时这样的功能，你可以使用这里开发的精简版，但API仍然不稳定：https : //github.com/samuelgozi/firebase-firestore-lite

有人还试图通过将 firebase 代码分离到一个单独的包中、延迟加载它并在以下文件中执行来缩短加载时间WebWorker：https : //davidea.st/articles/firebase-bundle-size

根据我的经验，我什么也做不了。我需要来自 firestore 的实时功能，只有延迟加载包有助于避免显示空白页面，但我的页面仍然需要firestore明显地显示内容。

更新

现在正在跟踪包文件大小问题：https : //github.com/firebase/firebase-js-sdk/issues/332

Answer 3

截至 2021 年 5 月。Firebase 团队发布了 Firebase JS SDK 版本 9，现已提供测试版！版本 9 是完全模块化且可摇树的

在此处详细了解如何从版本 8 升级到版本 9