LaravelにてFirebaseの警告文が表示される。

Laravelを勉強しているものです。Firebaseを使ったアプリを作成しています。

実装しているソースコードは以下です。

php
1@extends('layouts.app')
2
3@section('content')
4<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
5    <head>
6        <meta charset="utf-8">
7        <meta name="csrf-token" content="{{ csrf_token() }}">
8        <link href="{{ asset('css/styles.css') }}" rel="stylesheet">
9        <script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>
10        <script>
11          // Initialize Firebase
12          var config = {
13            apiKey: '{{ env('FIREBASE_API_KEY') }}',
14            authDomain: '{{ env('FIREBASE_AUTH_DOMAIN') }}',
15            databaseURL: '{{ env('FIREBASE_DATABASE_URL') }}',
16            projectId: '{{ env('FIREBASE_PROJECT_ID') }}',
17            storageBucket: '{{ env('FIREBASE_STORAGE_BUCKET') }}',
18            messagingSenderId: '{{ env('FIREBASE_MESSAGING_SENDER_ID') }}'
19          };
20          firebase.initializeApp(config);
21        </script>
22
23    </head>
24    <body>
25      (中略)
26    </body>
27</html>

phpに<script>タグを使ってFirebaseの初期化処理を実装しているのですがChromeの検証で確認すると
以下の警告文が表示されました。

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 CDN builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

https://www.gstatic.com/firebasejs/5.0.0/firebase-<PACKAGE>.js

app.jsに以下のimport文を入れてみたのですが警告文は無くなりませんでした。
import firebase from 'firebase/app'
import 'firebase/database'

import文は外部jsファイルを作成して定義するものなのでしょうか？
Firebaseの設定に詳しい方がいましたらご回答いただけますか？

行動規範の内容に同意します

回答1件

ベストアンサー

Laravelは関係ないですね。

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 CDN builds, these are available in the following manner

(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

https://www.gstatic.com/firebasejs/5.0.0/firebase-<PACKAGE>.js

質問者さんは <script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script> として読み込んでるので For the CDN builds の方ですね。
importは今回関係ないです。

使うコンポーネントだけを読み込んだ方が良いよと警告されています。

https://www.gstatic.com/firebasejs/5.8.2/firebase.js はfirebaseの全てのパッケージを含んでいます。
使わないものも読み込むのは無駄ということです。

firebaseのどの機能を利用しているのかわからないのであくまで例ですが以下のようにします。

<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase-app.js">
<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase-auth.js">
<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase-firestore.js">

投稿2019/03/05 01:36