Nuxt•3mo ago

Performance disadvantages of splitting components into separate chunks

So I'm working with Nuxt2. Usually if we have a component that is rendered using v-if (so it is not always needed) we import it like this:

  components: {
    SideCategory: () => import(/* webpackChunkName: "SideCategory" */
      '~/components/SideCategory.vue')
  },

  components: {
    SideCategory: () => import(/* webpackChunkName: "SideCategory" */
      '~/components/SideCategory.vue')
  },

And in the final build we get a separate JS chunk for this component. It is all fine. But my question is - is there any potential drawback of importing every component like this? Would it be better to keep components that are always visible imported normally? Meaning:

import Description from '~/components/Description .vue';
// ...
components: { Description }

import Description from '~/components/Description .vue';
// ...
components: { Description }

Does creating bunch of small chunks hurt the performance and core web vitals? I guess it could make it slightly worse, but the difference for a single component would be to small to measure it. What do you think?

3 Replies

manniL•3mo ago

You can achieve the same via Lazy in nuxt btw (see also https://www.youtube.com/watch?v=YbAQC1yetUM)

Alexander Lichter

YouTube

The Lazy component prefix and when to use it - Nuxt Performance in ...

🤯 Nuxt provides amazing auto-import capabilities for composables, utils and also components out of the box. But besides auto-importing them, it also provides a "Lazy" version of it. In the second video of the Nuxt Performance in Depth series, we have a look at the lazy prefix, what it does and when to use it to achieve sweet performance gains! ...

manniL•3mo ago

It can make a difference depending on when you load them "extracting" them into own chunks will reduce the initial load but might take longer when users "interact" (the v-if triggers)

Gumaa•2mo ago

@manniL / TheAlexLichter a little bit late reply, but... is Lazy avaliable in Nuxt2? And besides that I'm interested specifically about using that for components that do not have v-if on them. Components that will be always rendered. Does that make sense or maybe it will be bad for the performance?

Gaming

Programming

Performance disadvantages of splitting components into separate chunks