vue-router lazy loading routes reduces performance

[aryankarim]

I use vite's vuejs3, and performance rate with lighthouse will become much lower when I use lazy loading route from vue-router.

The built performance for the homepage with dynamic import is 75.
The built performance fort the homepage with static import is 90.

I don't the actual reasoning behind this. The performance should be increasing instead of decreasing.

dependencies:
"vue-router": "^4.1.5",
"@vitejs/plugin-vue": "^3.1.0",
"typescript": "^4.6.4",
"vite": "^3.1.0",
"vue-tsc": "^0.40.4"

[LinusBorg]

dynamic imports introduce a certain lag, as they need to be loaded in a second step, after the entry file has been loaded from the backend. So they don't make things faster on their own.

They only become a performance benefit if you have many routes, and import each one dynamically, instead of bundling all of those routes in one giant initial bundle.

You could even do a mixed setup where you statically import i.e. the homepage into the initial bundle because this needs to be very performant, and then load other routes dynamically in order to keep the initial bundle lightweight.

[aryankarim]

@LinusBorg Thank you for the tip. I tested it, and I think because the other routes aren't very heavyweight, the performance for the home page is still the same.

Plus, I'm using LightHouse for the performance testing, and I believe it isn't too accurate.

[douglasg14b]

I have a similar problem, it can take multiple seconds to load lazy routes, which is largely unworkable 😬 .