vikejs / vike

🔨 Flexible, lean, community-driven, dependable, fast Vite-based frontend framework.

Home Page:https://vike.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

httpResponse.earlyHints includes unneeded JS in HTML-only mode

jonaskuske opened this issue · comments

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:

image

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))
}
commented

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

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'))

commented

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?

commented

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

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

commented

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 🤔)

commented

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.

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 :(

commented

No problems :)