Javascript 如何导入firebase并使用webpack将其服务拆分为多个拆分块？

现在我正在做：

firebase.js

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

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,
  appId: process.env.FIREBASE_APP_ID,
};

firebase.initializeApp(config);

export default firebase;

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all',
    maxInitialRequests: Infinity,
    minSize: 0,
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name(module) {
          const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
          return `npm.${packageName.replace('@', '')}`;
        },
      },
    },
  },
}

webpack.config.js

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

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,
  appId: process.env.FIREBASE_APP_ID,
};

firebase.initializeApp(config);

export default firebase;

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all',
    maxInitialRequests: Infinity,
    minSize: 0,
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name(module) {
          const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
          return `npm.${packageName.replace('@', '')}`;
        },
      },
    },
  },
}

我从这篇文章中得到的网页部分：

这就产生了一个小的667kb的JS文件（这是生产版本）：

问题

我可以用其他方式导入它，这样我就可以得到更小的块吗

例如：

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

但我不知道我将如何处理这些“额外对象”，因为我唯一需要和使用的是我从

firebase/app

获得的

firebase

对象

另外，如果我像这样导入它们，并且不使用对象，Webpack不会将它们解释为“死代码”并对它们进行树震动吗

---

这样做的正确方法是什么？

Firebase将这些导入直接加载到Firebase对象中，无法从那里将其树状化。您可以选择使用动态导入加载这些文件，然后webpack将处理这些文件的代码拆分。如果未导入，则不会将这些实例添加到firebase对象中，因此您可以执行简单的If检查以将其加载

导出异步函数getFirestoreInstance（）{
如果（！firebase.firestore）{
等待导入（“firebase/firestore”）；
}
返回firebase.firestore（）；
}

例如，当您需要使用Firestore时，只需调用getFirestoreInstance

异步函数doSomethingWithFirestore（）{ 试一试{ const firestore=wait getFirestoreInstance（）； firestore.collection（“foo”）//用firestore做点什么 } }

---

Firebase将这些导入内容直接加载到Firebase对象中，无法从那里将其树形化。您可以选择使用动态导入加载这些文件，然后webpack将处理这些文件的代码拆分。如果未导入，则不会将这些实例添加到firebase对象中，因此您可以执行简单的If检查以将其加载

导出异步函数getFirestoreInstance（）{
如果（！firebase.firestore）{
等待导入（“firebase/firestore”）；
}
返回firebase.firestore（）；
}

例如，当您需要使用Firestore时，只需调用getFirestoreInstance

异步函数doSomethingWithFirestore（）{ 试一试{ const firestore=wait getFirestoreInstance（）； firestore.collection（“foo”）//用firestore做点什么 } }