Optimize Bundle Size and Performance of Nuxt Project (with BootstrapVue and Firebase)

Apr 12, 2022

Analyze Bundle Size

Analyze Nuxt.js Webpack Bundle Size

Bootstrap

Optimize BootstrapVue/Bootstrap Bundle Size (JavaScript and CSS) for Nuxt

BootstrapVue Icons Import Specific Icon Only (Tree Shaking, Reduce Size)

Firebase

Use Firebase v9 Modular with Tree Shake.

Load Firebase Module dynamically only when required.

Lazy Load Google Adsense When Component/Element Is Visible.

Nuxt

Disable Generation of Manifest.js.

Dynamically Load Component

Load BootstrapVue ModalPlugin and Content JavaScript Only When Shown.

Others

Write Tree Shaking Friendly Modules (ECMAScript)

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.

Tags
Related articles
Nuxt Sign-in With Firebase Auth V9 Modular With FirebaseUINuxt Load Firebase V9 DynamicallyNuxt With Firebase V9 Modular (Tree Shake)Cloud Functions by Firebase vs Cloud FunctionsFirebase Cloud Function (Node.js) Write to Firestore Upon Firebase Authentication User SignupTest Firebase Cloud Functions Access Firestore Emulator (Node.js)Firebase Hosting Multiple SitesDeploy Nuxt.js (SSR) to Firebase Cloud FunctionsSetup Firebase Hosting and Functions (Node)Access Firebase Storage Json File via Web/Vue.jsUpload File to Firebase Storage (Python)Setup Firebase Email Authentication (Web) with Whitelisted emails using Vue.js and Vue RouterSetup AdMob for Android With FirebaseSetup Firebase HostingSetup Firebase Authentication for Web With FirebaseUI (Google Authentication)Create Compatible Cloud Functions for Firebase With Python (Callable from Cloud Functions for Firebase client SDK)Android Allow User to Disable Firebase Analytics (GDPR)Android Allow User Settings to Disable Fabric/Firebase Crashlytics (GDPR)How To Add Firebase Analytics To Android