Vue Router Loads All My Lazy-loaded Components At Startup

I have a Vue (vue:2.6 & cli-service:4.1) application with a lazy loading router configured like this: router.ts const Grid = () => import(/* webpackChunkName: 'grid' */ './v

Solution 1:

First thing is to confirm this is really not prefetching...

1. Build your app and look at the generated index.html - if you see <link> tags with rel="prefetch" and your lazy loading chunks, this is prefetching Vue CLI does automatically. On the link above you can read about how to disable it or fine tune it

2. Check the network tab in Dev Tools and select one of your lazy loaded chunks - look at the Request headers and look for Purpose: prefetch (Firefox uses X-Moz prefetch). If you find this, it means that browser requested the chunk because of prefetch link...

Now you can confirm your feeling that these chunks slow down your app 1st render. Best way is again using Dev Tools - this time the Performance (I'm more used to Chrome ...seems better than Firefox)

Chrome: Just open Dev Tools, switch to Performance tab and use small "reload" icon with "Start profiling and reload page" tooltip. You can stop the profiling after page is loaded.

Here is the screenshot of one of mine apps. This is Vue CLI app with just one lazy route ("admin"). It may seem like DOMContentLoaded event (blue DCL) and First Paint (green FP) strangely correlate with admin98... chunk finished loading so it may seem my app's 1st paint is blocked by my lazy loaded "admin" chunk

But if you look more carefully you will see there is a task running ("Parse HTML" + "Evaluate Script" - selected in the screenshot) - it starts when the last "non prefetch" script is loaded ("chunk-vendors" in this case) and accidentally finishes at the same time "admin" chunk loading is finished. So the browser is parsing other non-lazy loaded JS of my app and at the same time downloading prefetch scripts. It is clear that prefetching lazy loaded chunk do not block or delay my app 1st paint even it may seem so...

This is just an example