loading...

Let's Analyze your webpack bundles with Nuxt

debs_obrien profile image Debbie O'Brien Updated on ・2 min read

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

Posted on Aug 18 '19 by:

debs_obrien profile

Debbie O'Brien

@debs_obrien

Head of Learning and Developer Advocate at NuxtJS, speaker, writer, teacher, open source contributor, vue, nuxt, webpack

Discussion

markdown guide
 

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.