Nuxt Load Firebase V9 Dynamically
April 12, 2022I Nuxt With Firebase V9 Modular (Tree Shake), we load firebase application and analytics by default (static), but load other firebase modules like auth and firebase dynamically.
Here we will load everything dynamically.
Edit plugins/firebaseClient.js
with the following modification.
import { initializeApp, getApps } from "firebase/app"
import { getAnalytics } from "firebase/analytics";
const firebaseConfig = {
apiKey: "AIza******",
authDomain: "*****.firebaseapp.com",
projectId: "*****",
storageBucket: "*****.appspot.com",
messagingSenderId: "9613*****",
appId: "1:9613*****:web:5ec9*****",
measurementId: "G-C7*****"
}
export default async ({ app, store }, inject) => {
const fire = {
// app,
// analytics,
async getApp() {
if (!this.app) {
// const { initializeApp, getApps } = await import(
// /* webpackChunkName: "firebase" */
// "firebase/app")
const apps = getApps()
let firebaseApp = null
if (!apps.length) {
this.app = initializeApp(firebaseConfig)
} else {
this.app = apps[0]
}
}
return this.app
},
async getAnalytics() {
if (!this.analytics) {
// const { getAnalytics } = await import(/* webpackChunkName: "firebase" */ "firebase/analytics");
const firebaseApp = await this.getApp()
this.analytics = getAnalytics(firebaseApp);
}
return this.analytics
}
}
inject('fire', fire)
if (process.env.NODE_ENV == 'production') {
// if (isMobile()) {
// delay loading analytics
setTimeout(async () => {
await fire.getAnalytics()
}, 5000)
// }
//else {
// await fire.getAnalytics();
//}
}
}
If you want to optimize the default bundle size further, you can also perform dynamic import.
// import { initializeApp, getApps } from "firebase/app"
// import { getAnalytics } from "firebase/analytics";
const fire = {
async getApp() {
if (!this.app) {
const { initializeApp, getApps } = await import(
/* webpackChunkName: "firebase" */
"firebase/app")
const apps = getApps()
let firebaseApp = null
if (!apps.length) {
this.app = initializeApp(firebaseConfig)
} else {
this.app = apps[0]
}
}
return this.app
},
async getAnalytics() {
if (!this.analytics) {
const { getAnalytics } = await import(/* webpackChunkName: "firebase" */ "firebase/analytics");
const firebaseApp = await this.getApp()
this.analytics = getAnalytics(firebaseApp);
}
return this.analytics
}
}
NOTE: JavaScript Dynamic Import with Tree Shaking (via async).
- algo-trading
- algolia
- analytics
- android
- android-ktx
- android-permission
- android-studio
- apps-script
- bash
- binance
- bootstrap
- bootstrapvue
- chartjs
- chrome
- cloud-functions
- coding-interview
- contentresolver
- coroutines
- crashlytics
- crypto
- css
- dagger2
- datastore
- datetime
- docker
- eslint
- firebase
- firebase-auth
- firebase-hosting
- firestore
- firestore-security-rules
- flask
- fontawesome
- fresco
- git
- github
- glide
- godot
- google-app-engine
- google-cloud-storage
- google-colab
- google-drive
- google-maps
- google-places
- google-play
- google-sheets
- gradle
- html
- hugo
- inkscape
- java
- java-time
- javascript
- jetpack-compose
- jetson-nano
- kotlin
- kotlin-serialization
- layout
- lets-encrypt
- lifecycle
- linux
- logging
- lubuntu
- markdown
- mate
- material-design
- matplotlib
- md5
- mongodb
- moshi
- mplfinance
- mysql
- navigation
- nginx
- nodejs
- npm
- nuxtjs
- nvm
- pandas
- payment
- pip
- pwa
- pyenv
- python
- recylerview
- regex
- room
- rxjava
- scoped-storage
- selenium
- social-media
- ssh
- ssl
- static-site-generator
- static-website-hosting
- sublime-text
- ubuntu
- unit-test
- uwsgi
- viewmodel
- viewpager2
- virtualbox
- vue-chartjs
- vue-cli
- vue-router
- vuejs
- vuelidate
- vuepress
- web-development
- web-hosting
- webpack
- windows
- workmanager
- wsl
- yarn