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

Analyze Bundle Size

Analyze Nuxt.js Webpack Bundle Size


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

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


Use Firebase v9 Modular with Tree Shake.

Load Firebase Module dynamically only when required.

Lazy Load Google Adsense When Component/Element Is Visible.


Disable Generation of Manifest.js.

Dynamically Load Component

Load BootstrapVue ModalPlugin and Content JavaScript Only When Shown.


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.