Vuepress: [Feature request] Config option to disable prefetch links, or only prefetch certain pages

[jakeg]

Feature request

What problem does this feature solve?

Sites with many pages don't want to prefetch all pages. For example, a site with 1,000+ pages may want to prefetch no pages, or a small selection of main pages.

What does the proposed API look like?

In .vuepress/config.js add an option prefetch which defaults to true but can be changed to false to not prefetch any pages, or an array of pages.

module.exports = {
  // To not do any prefetching of pages
  prefetch: false,
  // Or to prefetch a selection of main pages
  prefetch: [
    '/about',
    '/faq',
    '/contact'  
  ]
}

How should this be implemented in your opinion?

Are you willing to work on this yourself?**

[ulivz]

For request 1, we have supported, see: shouldPrefetch.

For request 2, Since VuePress's prefetch is based on vue-server-renderer, and only when Vue SSR supports so fine-grained control can we implement it. so please create this feature request for vue-server-renderer.

[jakeg]

Thanks. Really weird caching issue or something on the page you linked to there... at first the shouldPrefetch block didn't appear at all, had to refresh several times to see it.

[ulivz]

That's the issue of service worker, make sure you have closed all the previous vuepress website tabs before opening this link.

BTW, we'll have a update popup UI in the future: https://github.com/vuejs/vuepress/pull/533

[rwxrob]

Just a note that the documentation on shouldPrefetch has an example with a preload link in it. It confused me at first having just read about the difference between shouldPreload in the main Vue docs but when I tried both confirmed that shouldPreload is not a VuePress thing and that shouldPrefetch set to false stops all prefetch links in index.html but leaves the essential preload ones.

By the way, to anyone coming across this, I have several hundred individual markdown files in my glossary of terms and turning prefetch off dramatically increased load time, obviously. I would look forward to a way to setup some sort of background caching of these resources using the serviceworker instead, but that would be a separate feature request.

[adarshmadrecha]

Now in v2.5.0 + of vue-server-renderer has support for defining function and can customize which paths should be prefetched.

https://ssr.vuejs.org/api/#shouldprefetch

  shouldPrefetch: (file, type) => {
    // type is inferred based on the file extension.
    // https://fetch.spec.whatwg.org/#concept-request-destination
    if (type === 'script' || type === 'style') {
      return true
    }
    if (type === 'font') {
      // only preload woff2 fonts
      return /\.woff2$/.test(file)
    }
    if (type === 'image') {
      // only preload important images
      return file === 'hero.jpg'
    }