在React中集成Firebase时收到SDK开发构建警告的解决咨询

你遇到的警告是因为当前代码导入了完整的Firebase SDK开发构建版本，生产环境下推荐按需导入仅需的SDK组件，按以下步骤修改即可解决：

修改导入方式 #

将原来的全局导入替换为按需导入核心模块+所需功能模块：

// 替换 import firebase from "firebase";
import firebase from 'firebase/app';
import 'firebase/database'; // 仅导入代码中用到的database模块

修改后的完整代码 #

import firebase from 'firebase/app';
import 'firebase/database'; // 导入所需的database模块

var firebaseConfig = {
  apiKey: "", // 添加你的API Key
  databaseURL: "" // 添加你的databaseURL
};

// 初始化Firebase
firebase.initializeApp(firebaseConfig);

export const db = firebase;

var firepadRef = firebase.database().ref();

export const userName = localStorage.getItem('auth_name');
const urlparams = new URLSearchParams(window.location.search);
const roomId = urlparams.get("id");

if (roomId) {
  firepadRef = firepadRef.child(roomId);
} else {
  firepadRef = firepadRef.push();
}

export default firepadRef;

原理说明 #

• firebase/app是Firebase的核心模块，仅包含初始化和核心基础功能
• 单独导入firebase/database是因为你的代码中使用了数据库功能，按需导入能减少打包体积，同时符合生产环境的SDK使用规范，从而消除警告

内容的提问来源于stack exchange，提问作者Aktaruzzaman Joti