It is really important to know what you are shipping to production. As we add so many third party libraries to our site sometimes we forget that perhaps they are going to have an impact on our performance or sometimes we just don't read the install instructions and install the whole library instead of only what we need. So how can we analyze our bundles in Nuxt.js?
Nuxt makes it very easy for us to dive inside our webpack bundles and take a look at what is going on. Don't worry it is not scary at all. In fact the tool is very visual and really easy to launch.
You can create a command in your package.json
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"analyze": "nuxt build --analyze"
}
Or you can launch it directly in the terminal with yarn
yarn build --analyze
or if you don't have yarn you can use npx
npx nuxt build --analyze
Personally I prefer the shorthand version which is -a
yarn build -a
Then the webpack analyzer should launch in your browser window.
The navigation bar on the left allows you to choose which chunks to show. You can see all of them or just select the ones you want. And at a quick glance you can see the size of all your chunks.
You can also double click on the boxes, hover over them for more details and right click on a chunk to easily hide it or to hide all other chunks.
I hope you have fun analyzing your bundles but please do not deploy bundles built with "analyze" mode, they are for analysis purposes only.
Top comments (4)
Usually i like to use the pages bundle part it's just awesome.
I don't see a lot of advise about budget size bundle (i am not sure if this term exist ^^).
How much you should not go beyond for vendor / app / pages
It sure is. The analyze tool just allows you to further investigate and catch anything that you shouldn't be shipping which is great when you work with a team of people so you don't necessarily know what has been added. Webpack recommends that bundles be less than 250kb or else it will give the warning.
Here is a great link on bundles sizes
web.dev/codelab-setting-performanc...
I like this thought, I think I can see where I can utilise my resources now.
Thanks.
Hiya - this doesn't work with Nuxt 3 ? Does anyone know how we can use it?