javascript - 如何减少 Firebase bundle 的大小？

Question

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

而且我注意到firebase已经产生了相当大的 block 。

它是 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 总是警告这个 block 大小。

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 的开发中运行良好。我会更新一次。
更新:现在已经在生产中运行了一年多，并且遇到了零问题。 Firebase 此后发布了 V9，同时支持旧版(兼容性)和可摇树模式。