Preload CSS and JS dependencies

[benmccann]

Closes #1260
Closes #408
Closes #440
Closes #712
Closes #449
Closes #405
Closes #70

I made a small library to extract the dependency tree from the Rollup OutputChunk[]. If you're okay with it being added a dependency here then I can go ahead and publish it to npm. By having it as an external project other projects can use it as well. Also, it made it easier to test because I wrote a test that operates on a JSON dump of a Rollup compilation result. Importing JSON in a test was kind of tricky and I had more control over changing settings for tsconfig, mocha, etc. in an external project to make that work

I ran this with npm link in the realworld project with Chrome set to emulate a slow 3g connection and it makes a big difference. You can see the JS files for the current page being loaded in parallel in the network tab instead of sequentially.

This PR

Current Deployed Real World Sample

[antony]

Looks good, just needs a little tidy

[habibrosyad]

Hoping that this will get merged soon 👍

[bgjehu]

@benmccann does this preloading dependencies feature works for sapper export?

[benmccann]

If you run the Sapper server, then preload will be added as a header. Since you can't easily control headers on exported pages, I believe that there's some code in export that tries to turn the headers into <link rel="preload"> tags in the exported pages. I haven't tested the export functionality. That was around before this PR which wouldn't affect it and I haven't used export myself, but yes it should work - just a little differently

[riccardolardi]

Also interested in whether the preloading will work in sapper export. @benmccann any hint on this?

[benmccann]

I answered the question with all information I have about it just above: #1269 (comment)

[benmccann]

I think I know why it's not working for export: #919 (comment)

I don't use export, so I'm not going to have time to fix it myself, but I'll review a PR if anyone wants to send one

[riccardolardi]

@benmccann is it just about adding that line eg changing it to modulepreload? I‘d love to contribute if I‘m able

[benmccann]

You'd want to support both, so I'd imagine the fix looks like this:

				if (ref.rel === 'preload' || ref.rel === 'modulepreload') {
					body = (body as string).replace('</head>',
						`<link rel="${ref.rel}" as=${JSON.stringify(ref.as)} href=${JSON.stringify(ref.uri)}></head>`);
				}

The main thing here is testing out the fix and making sure it works

[benmccann]

I'm not sure what you're suggesting. routify.dev is built with Routify and not Sapper, so I'm not really sure how it's related. For comparison, Sapper sites score very highly on Google's Page Speed score. E.g. https://realworld.svelte.dev/ which is built with Sapper scores in the 90s.

[cortopy]

@benmccann sorry, I posted in the wrong thread. I moved the comment but notifications must've gone through anyway. My apologies. You should have the other one too I believe

[riccardolardi]

@benmccann I've submitted a PR #1539 when you find some time I'd be thankful if you could review. Thanks!