1

现在我正在做：

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;

webpack.config.js

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部分：

https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

这导致了这个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对象就是我从中得到的对象firebase/app

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

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

4

1 回答 1

0

Firebase 将这些导入直接加载到 firebase 对象中，无法从那里对其进行 treeshake。你可以做的是选择性地使用动态导入加载这些，然后 webpack 将负责对这些进行代码分割。如果未导入，这些实例不会添加到 firebase 对象中，因此您可以通过简单的 if 检查来加载它们。


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

    return firebase.firestore();
}

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

async function doSomethingWithFirestore(){
   try {
      const firestore = await getFirestoreInstance();
      firestore.collection("foo") // do something with firestore
   }
}
于 2021-01-22T19:35:35.000 回答