DEV Community

Debbie O'Brien
Debbie O'Brien

Posted on • Updated on • Originally published at debbie.codes

Let's Analyze your webpack bundles with Nuxt

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"
}
Enter fullscreen mode Exit fullscreen mode

Or you can launch it directly in the terminal with yarn

yarn build --analyze
Enter fullscreen mode Exit fullscreen mode

or if you don't have yarn you can use npx

npx nuxt build --analyze

Enter fullscreen mode Exit fullscreen mode

Personally I prefer the shorthand version which is -a

yarn build -a
Enter fullscreen mode Exit fullscreen mode

Then the webpack analyzer should launch in your browser window.
Alt Text

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.
Alt Text

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.
Alt Text

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)

Collapse
 
flozero profile image
florent giraud

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

Collapse
 
debs_obrien profile image
Debbie O'Brien

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...

Collapse
 
heyrohit profile image
Rohit Gupta

I like this thought, I think I can see where I can utilise my resources now.
Thanks.

Collapse
 
v3nt profile image
v3nt

Hiya - this doesn't work with Nuxt 3 ? Does anyone know how we can use it?