Programmatically preload secondary routes

[Rich-Harris]

At present, as soon as the first route is rendered, Sapper preloads the modules for all your secondary routes. In a lot of cases that makes sense, but not always.

Perhaps it should be a function that the user can choose whether or not to run:

import { init, preloadRoutes } from 'sapper/runtime.js';
import { routes } from './manifest/client.js';

init(document.querySelector('#sapper'), routes).then(() => {
  preloadRoutes();
});

With no arguments, it would preload all routes. Or, you could provide an array of routes:

// could replace '[slug]' with '*' or 'whatever', it'd still match
preloadRoutes(['/about', '/blog/[slug]']);

Not sure how you'd specify error pages in the second case. Maybe '4xx' and '5xx' get special treatment.

[mrkishi]

(I was actually about to open a similar issue..)

That looks good!

And perhaps by default Sapper could wait a bit before preloading all other routes?

I saw definitive Lighthouse improvement (of seconds) by not preloading everything right away when moving from Sapper to Svelte in my app. Granted, there were quite a few other differences, but this was the most glaring one (the architecture was largely the same).

[Rich-Harris]

Interesting, I hadn't considered that it would actually harm Lighthouse scores. In #161, secondary routes aren't loaded by default — the expectation is that you'd do something like this...

init(target, routes).then(() => preloadRoutes());

...and if you wanted to wait a beat, you could do that like so:

init(target, routes).then(() => {
  setTimeout(() => preloadRoutes(), 2000);
});