Sapper: Preloading assets in Rollup apps

[Rich-Harris]

Currently, only client.xyz123.js is preloaded. Sapper should add preload headers for all the JS and CSS needed for the page being server-rendered

[MaxMilton]

I'd like to suggest we also inject <link href=xxx rel=preload as=xxx> and <link href=xxx rel=prefetch as=xxx> into the document head for sapper export so static builds can also benefit. The headers are great since some systems can use them for HTTP/2 push but the reality is it's still early days for push.

[rwwagner90]

Any chance we could get one of the PRs merged in with the fix? I would love to increase my Lighthouse score 😃

[ahfarmer]

Static sites can benefit from link headers as well, depending on how they are deployed. For instance with Netlify you can create a _headers file which specifies the headers for each path: https://www.netlify.com/docs/headers-and-basic-auth/

Would be great if we could export the headers somehow, or if there is a place to hook in a plug-in to create the _headers file.

[benmccann]

The headers should be preferred over the link tags because the preload spec mentions that servers may initiate a PUSH when they see a preload header and most CDNs have standardized around this behavior to initiate a PUSH.

[benmccann]

I sent a PR that implements this for JS files when using Rollup: https://github.com/sveltejs/sapper/pull/1269

We could probably implement it for CSS files and maybe webfonts or other files, but it's a pretty good start and probably the most meaningful piece to get done.

[benmccann]

@Rich-Harris is Sapper supposed to do code splitting on CSS files? It seems like rollup-plugin-svelte may be broken with Rollup 2 https://github.com/sveltejs/sapper-template/issues/233. I can't make further progress on this without some advice from you or maybe @Conduitry or @antony on how the CSS is intended to work and probably someone with more Rollup experience fixing that issue assuming it is indeed an issue

[antony]

@benmccann interesting, I'd not noticed a difference. Ill check as soon as I'm able.

[kevmodrome]

Not sure if relevant but might this be something to take a look at: https://github.com/vikerman/rollup-plugin-hoist-import-deps ?

I'm using this on https://svelte.school with good results :)

[benmccann]

@kevmodrome thanks for the pointer. I'd actually taken a look at that plugin. It's helpful, but https://github.com/sveltejs/sapper/pull/1269 does even better. You can see my findings here: https://github.com/sveltejs/sapper/issues/1260#issuecomment-642289567.

Anyways, that plugin and the work I've done so far just address the JS piece. My remaining question is about the CSS. I'm happy to put together a PR address the CSS piece as well, but think we should figure out the Rollup 2 compatibility first

[habibrosyad]

Just as an addition to issue https://github.com/sveltejs/sapper-template/issues/233 pointed by @benmccann, I had actually posted another issue in https://github.com/rollup/rollup/issues/3655 along with the repro details.

[benmccann]

With much help from the Rollup team, I was able to fix CSS code splitting in Sapper for Rollup 2 and sent a PR for it: https://github.com/sveltejs/sapper/pull/1306. For Rollup 2 users will need to use Rollup 2.21.0+ and will need https://github.com/sveltejs/sapper/pull/1306 merged in order to get code splitting. Otherwise everything is loaded as one big CSS file

With that fixed, I've gone ahead and updated my PR https://github.com/sveltejs/sapper/pull/1269 to preload CSS which was fairly straight-forward since most of the work was already done and we just needed to connect some pieces. It will work with any version of Rollup 1 and Rollup 2, but you will need the fix I just mentioned and latest version of Rollup to get code splitting if using Rollup 2

[LucianVoju]

Hello, got any update when this merge will happen? Thx

[LucianVoju]

Hello, are there any needed configurations in Rollup or Sapper to benefit from this?

[benmccann]

No configuration is necessary

[LucianVoju]

Any package update?

[benmccann]

Yes, you need to use Sapper 0.28.0

[LucianVoju]

ok, thank you

[LucianVoju]

got this message:
'preload' is not exported by 'src/routes/_layout.svelte'
333:
334: if (!root_preloaded) {
335: const root_preload = root_comp.preload || (() => {});
^
336: root_preloaded = initial_data.preloaded[0] || root_preload.call(preload_context, {
337: host: page.host,

[benmccann]

That's unrelated to this PR. Please see the migration guide: https://sapper.svelte.dev/migrating#0_27_to_0_28

[LucianVoju]

Did all the steps and still have the message, also on the realworld project after sapper update getting the same message

[benmccann]

It's the last bullet in the migration guide. It works fine on the realworld project. See my PR that's pending there to do the upgrade

If you have further issues, please ask in Discord. The warning you're seeing is unrelated to the feature discussed in this ticket

[LucianVoju]

All is fine, thank you.