Как импортировать FireBase и разделить его сервисы на несколько частей с помощью веб-пакета? - PullRequest
0 голосов
/ 17 февраля 2020

Прямо сейчас я делаю:

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

И это приводит к этому маленький файл 667 КБ JS (это производственная версия):

enter image description here

ВОПРОС

Могу ли я импортировать его другим способом, чтобы я мог получить меньшие куски?

Например:

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 не интерпретирует их как «мертвый код», а дерево трясет их?

Как правильно это сделать?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...