Firebaseを使ったアプリを本番環境にデプロイする際の注意点（コンポーネントの指定）

Firebase関連のコンポーネントを使ったアプリをビルドしてブラウザから動作確認を行うと、コンソールに『It looks like you're using the development build of the Firebase JS SDK.』という警告が表示されたので、その対応になります。

動作確認でブラウザのコンソールに出力された警告メッセージは以下の通りです。

It looks like you're using the development build of the Firebase JS SDK. 
When deploying Firebase apps to production, it is advisable to only import 
the individual SDK components you intend to use. 

For the module builds, these are available in the following manner 
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc): 

CommonJS Modules: 
const firebase = require('firebase/app'); 
require('firebase/<PACKAGE>'); 

ES Modules: 
import firebase from 'firebase/app'; 
import 'firebase/<PACKAGE>'; 

Typescript: 
import * as firebase from 'firebase/app'; 
import 'firebase/<PACKAGE>';

上記の警告が出た時のコードは以下の通りです。

import firebase from 'firebase'
const db = firebase.firestore()

警告として出力されたメッセージによると、本番環境にデプロイする際には使用するコンポーネントを指定しないといけないようなので、以下のようにします。

import firebase from 'firebase/app'
import 'firebase/firestore'
const db = firebase.firestore()

修正後は警告メッセージが出なくなります。

今回はES Modulesでの対応でしたが、CommonJS ModulesやTypescriptの場合でも同様な対応が必要なようです。

Firebaseを使って思いましたが、コンソールに出力されるログがかなり親切なのが嬉しいですね。