CODEWITHSUNDEEP
javascriptvue.jswebpackvuejs2nuxt.js
AnJ
AnJ

Reputation: 614

Performance disadvantages of splitting every component into separate chunks in Nuxt?

So I'm working with Nuxt 2.15 (Vue 2.6). 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')
  },

And in the final build we get a separate JS chunk for this component. And we get it only when it is needed. So it is all fine.

But my question is - is there any potential drawback of importing every component like this? I saw couple of times in the project I'm working on that components that are always rendered (without v-if) are being lazy imported. And I wonder if maybe it can hurt our performance?

Wouldn't it be better to keep components that are always visible imported normally and let Nuxt/Webpack do its work? Meaning:

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

Does creating a 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 so I can not validate it easily.

Upvotes: 0

Views: 38

Answers (1)

user29313597
user29313597

Reputation: 1

Importing a component but not using it in the template does not have major impact runtime performance. However, it increases the bundle size slightly, as the component is included in the final JavaScript build.

If you are using lazy loading (async components or dynamic imports), then unused components will not be loaded until needed, reducing the initial load time.

Upvotes: 0

Related Questions