vuejs / vue-router

🚦 The official router for Vue 2
http://v3.router.vuejs.org/
MIT License
18.99k stars 5.06k forks source link

Feature Request - Route preloading #1018

Closed alexstanbury closed 7 years ago

alexstanbury commented 7 years ago

It would be great to be able to preload routes in the background while a user is browsing the app. This would mean less chance of there being a delay when a new route is navigated to that the user has not already visited.

This seems to be something the Angular 2 router has, there is a description of how they approach it here: https://vsavkin.com/angular-router-preloading-modules-ba3c75e424cb#.r9f68uyhs

fnlctrl commented 7 years ago

Hi, thanks for filling this issue. Preloading should indeed be useful, though I think it's better handled by module bundlers (webpack/browserify/rollup etc.) in a framework agnostic approach, or a separate library that works on top of those build systems, rather than being implemented by each framework all over again.

Currently, with webpack and chrome, you can already achieve it with <link rel="preload" src=".."/>. You can check out the guide here: https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2#.iq9o9six5#8fb3 under the Bonus: Preload those routes! section.

alexstanbury commented 7 years ago

Thanks for the reply, I'll have to wait and see what happens in the future.

alvirtuoso commented 7 years ago

+1 This feature is very useful! The article has detailed info that includes:

At the time of writing, preload is only implemented in Chrome, but can be treated as a progressive enhancement for browsers that do support it.

kirkbushell commented 1 year ago

Sveltekit has this out of the box, it seems really odd that Vue-router wouldn't include it, and have it as an optional attribute you can provide to route-link.

It's also about more than just bundling your JS. What if your route depends on data from the server? Being able to pre-fetch important pieces can shave 100-200ms off the user experience, as that's how long a click takes.