Vue.js lazy loading loads chunk files two times

Question

I have a vue.js router implemented and if I run npm run build it correctly creates separate files for every component. But if I run npm run serve and then open the page all components files are loaded immediately not lazy. If I click on the link to component it loads the components file again. I don't understand why it is not lazy. Look at the screenshot. There are contact.js (which should be chunk) loaded two times. First on refresh second on link click.

it's called prefetching. vue-cli 3 does this by default: cli.vuejs.org/guide/html-and-static-assets.html#prefetch Regarding the chunk being loaded twice, I suggest that you build in production mode and then check the actual response of both the duplicate requests. I think the second time, the chunk only gets loaded from browser cache and does not make a network request — ravi kumar
– ravi kumar, Commented Aug 27, 2020 at 7:40
Yes it seems like a prefetch. Where I can find something about vue.config.js? — Čamo
– Čamo, Commented Aug 27, 2020 at 7:51
Make an acceptable answer. It works fine with vue.config.js. Everything is ok. Thanks a lot. — Čamo
– Čamo, Commented Aug 27, 2020 at 7:55

ravi kumar · Accepted Answer · 2020-08-27 08:01:58Z

1

it's called prefetching. vue-cli 3 does this by default as explained here.
Regarding the chunk being loaded twice, I suggest that you build in production mode and then check the actual response of both the duplicate requests. I think the second time, the chunk only gets loaded from browser cache and does not make a network request

answered Aug 27, 2020 at 8:01

ravi kumar

1,6502 gold badges21 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js lazy loading loads chunk files two times

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related