Vue-router: Prefetching content before link is clicked

[callumacrae]

What problem does this feature solve?

Currently, when a link is clicked, it starts downloading content like images once the link has been clicked. Instead, it could be possible to add the content to a hidden element in the DOM on link mouseover (or even when the mouse is heading towards the link), so that the images start downloading before the link is clicked.

This would lead to a quicker perceived load time to the user and a snappier app - although if done poorly, could also result in a lot of wasted data.

Sort of like turbolinks, but better.

I have no idea if this is a feature request or if it is too specific to be included, but I can't actually figure out how to do it without modifying vue-router! Happy to contribute code if it's something that would work.

What does the proposed API look like?

I'm assuming it would have an option, but this would be mostly automatic.

[posva]

I like the idea but I think it should be done in userland instead, with a plugin or lib.
You could have a dynamic component pointing to the next guessed view.
The difficult part may be handling navigation guards
I haven't tested it but it should work 🙂

[callumacrae]

Cool. Happy to have a crack at a plugin.

I'm guessing it would be a case of calling router.resolve() with the value of the to attribute, then looking at .resolved.matched[0].components - but then I'm not sure how I would actually get that to appear in the DOM. I'm not familiar with vue/vue-router internals.

edit: or possibly having another instance of vue-router in a hidden element and calling router.push() on that instead?

[posva]

Yeah, you can start with that 🙂
You can pass a dynamic component with a render function easily h(String|ComponentDescriptor) or with <component :is="comp"/> in a template

[callumacrae]

Neat, will have a play. Thanks!

[posva]

Cool, please, post what you get back here!

[callumacrae]

Alright, done the first half of it: https://samknows.github.io/futurelink/ (edit: made it private until management approve 😞)

Kind of stuck with the next bit, though. I figured one of two approaches would be best:

• Have two routers, one of which isn't visible and doesn't affect the URL. This doesn't seem to be possible.

• Or, use router.resolve() and <component :is="comp"/> like you said above.

Here's my code:

<component v-if="preloadComponent" :is="preloadComponent"></component>

const href = link.getAttribute('href');
const resolved = router.resolve(href);

const matched = resolved.resolved.matched;
this.preloadComponent = matched[matched.length - 1].components.default;

It's not working, and I can't figure out how to get it to work: the router is resolving to the correct thing, but I can't get it added to the DOM.

Any ideas?

[posva]

Your repo looks really interesting, I'll give it a look tonight or tomorrow and try to help you 😄

[callumacrae]

The exact code I posted has started working overnight.

¯\_(ツ)_/¯

[callumacrae]

Here we go, futurelink is open source again (forever this time!) and I've written a vue component to go with it:

https://github.com/SamKnows/futurelink
https://github.com/SamKnows/vue-futurelink

It's been working really great for us - speeding page loads up by an average of ~850ms :)

[askart]

Hello, is there possibility to support Webpack magic comments for prefetch/preload modules?
I saw in the vue-router documentation support for grouping routes in a single chunk. So I've assumed that prefetch/preload working too, but not documented.

[posva]

Closing as the scope of this feature is beyond a router and it belongs in a plugin instead