httpResponse.earlyHints includes unneeded JS in HTML-only mode

[jonaskuske]

Description

I'm using HTML-only mode, which loads no JS besides the +client.ts files. Still, earlyHints instruct the browser to preload not only the +clients.ts script, but also the regular index.ts and corresponding chunks.

This leads to overfetching and logs warnings in the console:

[jonaskuske]

Workaround:

let earlyHints = httpResponse.earlyHints

// https://github.com/vikejs/vike/issues/1574
if (RENDER_MODE === 'MPA') {
  const { assetsManifest } = await getGlobalContextAsync()

  const hintSources = new Set(httpResponse.earlyHints.map((hint) => hint.src))
  const pageEntry = Object.values(assetsManifest!).find(
    (e) => e.src?.includes('pageConfigValuesAll') && hintSources.has('/' + e.file),
  )
  const pageEntryImports = (pageEntry?.imports ?? []).map((key) => assetsManifest![key].file)
  const pageEntrySources = new Set(
    [pageEntry?.file, ...pageEntryImports].map((file) => '/' + file),
  )

  earlyHints = httpResponse.earlyHints.filter((hint) => !pageEntrySources.has(hint.src))
}

[brillout]

Indeed, I can reproduce. How do you get the warnings in the bowser console? I don't get any.

[jonaskuske]

Hmm, I don't know, they just show up after a couple of seconds for me in Edge, should work the same in Chrome though. Have you checked whether EH work at all? They only work in prod for me, as they (or rather the fastify plugin I use) require HTTP2 or HTTP3.
(in console: performance.getEntries().filter(e => e.initiatorType === 'early-hints'))

[brillout]

Actually, the two early hints I can reproduce are CSS early hints which is correct.

I cannot reproduce JavaScript early hints, see b1d6b48.

Can you provide a reproduction?

[brillout]

Ah, wait, actually I can reproduce for a production build. Let me fix this.

[jonaskuske]

Looking at the assertion, is your plan to exclude all JS in HTML-only mode? +client.ts and its imports can stay, no?

[brillout]

Yes, early hints for client.js should stay.

(FYI I get an empty array upon performance.getEntries().filter(e => e.initiatorType === 'early-hints'), I guess my Express.js or Chrome setup doesn't support early hints 🤔)

[brillout]

Fix pre-released as 0.4.167-commit-14e4b5e.

Btw. in case your company is up for it Vike is looking for sponsors — it makes a massive difference.

[jonaskuske]

Thank you! And would love to – but unfortunately, I only use Vike privately (for my thesis on app render modes/architecture https://thesis.joku.co) and don't have the means to sponsor :(

[brillout]

No problems :)