Прямо сейчас я делаю:
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 (это производственная версия):
ВОПРОС
Могу ли я импортировать его другим способом, чтобы я мог получить меньшие куски?
Например:
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 не интерпретирует их как «мертвый код», а дерево трясет их?
Как правильно это сделать?