Nuxt Tip: Analyse Production Bundle
nuxi analyse is an experimental feature that builds your Nuxt application and analyses the production bundle.
To get started, simply call the following command in your project's directory:
This command creates a local server to view your production bundles:
You can select if you want to view bundle stats for the client or the Nitro server.
The following pictures show the client and server bundle stats for weekly-vue.news:
At first glance, everything could seem overwhelming, but the larger the rectangle, the bigger the dependency is within the bundle and the more likely it is to have an impact on performance.
If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Pinia Tip: Use Setup Stores for More Flexibility
Besides Option Stores you can also use Setup Stores to define stores in Pinia. They bring more flexibility as you can create watchers within a store and freely use any composable.
Vue Tip: Destructure Props in Composition API Without Losing Reactivity
How to correctly destructure props object in a Vue component while maintaining the reactivity.