[Question] - Lazy Imports

[viktor-anyvan]

Not sure i understand how does Lazy Import should work. I would assume adding "Lazy" in front of the component name would enable lazy loading. But after lot of tests I see the same results with or without "Lazy" (more related to splitChunks and if statement for the component).

Also was looking the files under .nuxt/components folder and in index.js I see exports for normal '../../components/XXXXXX.vue' and for lazy import('../../XXXXXX.vue' /* webpackChunkName: "components/xxxxxx" */).then(c => c.default || c) but not sure where are those used.

Interesting part was in .nuxt/components folder plugin.js where all the components are registered like () => import('../../components/XXXXXX.vue' /* webpackChunkName: "components/xxxxxx" */).then(c => c.default || c)

and at the end

for (const name in components) {
Vue.component(name, components[name])
Vue.component('Lazy' + name, components[name])
}

So basically registering the same under two names, with and without "Lazy", what I was referring to at the top, where I said I see the same results.

Please help! Thanks

[Pooya Parsa]

Hi dear viktor. Sorry with current documentation it is little bit misleading and there is no mention of hybrid loader. index.js is only generated to be used in test environments. plugin.js is effective as a fallback approach when loader is not present or cannot optimize imports for production build.

Using Lazy is to bypass loader in production. Otherwise nuxt will inline components by usage in page chunk which might be unwanted if you for example render that component conditionally with v-if.

[Michael Andorfer]

does this mean that lazy loading is only applied in production mode?

[Pooya Parsa]

@andorfermichael Both modes when using Lazy prefix.

[Michael Andorfer]

ok thanks for clarifying. I have a related question regarding auto import and lazy imports, because it seems to me that auto-imports already apply lazy imports?