kit: preload does not work and downloaded twice on firefox

Describe the bug

Here is the firefox bug of module preload: https://bugzilla.mozilla.org/show_bug.cgi?id=1425310, i.e. firefox does not support modulepreload. There is a similar issue for sapper, https://github.com/sveltejs/sapper/issues/1387.
The new vite already has a builtin preload plugin https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/importAnalysisBuild.ts#L156-L162 on the client side. It will insert preload links despite sveltejs/kit also does that: https://github.com/sveltejs/kit/blob/1007f6730600b3f770c5062d385d539661d6d0c6/packages/kit/src/runtime/server/page/render.js#L104-L106.

Links from svelte are like /./_app/pages/$layout.svelte-3b4aa0d5.js, but vite checks /_app/pages/$layout.svelte-3b4aa0d5.js. So vite does not think the inserted link is duplicated. One fix is:

--- a/node_modules/@sveltejs/kit/dist/chunks/index5.js
+++ b/node_modules/@sveltejs/kit/dist/chunks/index5.js
@@ -229,8 +229,8 @@ async function build_server(
 
                find_deps(file, js_deps, css_deps);
 
-               const js = Array.from(js_deps).map((url) => prefix + url);
-               const css = Array.from(css_deps).map((url) => prefix + url);
+               const js = Array.from(js_deps).map((url) => path.join(prefix, url));
+               const css = Array.from(css_deps).map((url) => path.join(prefix, url));
 
                const styles = config.kit.amp
                        ? Array.from(css_deps).map((url) => {

Vite inserted links like <link rel="preload" as="script" crossorigin="" href="/_app/pages/$layout.svelte-a23c4e9e.js">, but it does not take effect somehow. So when sveltekit import scripts, resource will be downloaded again.

To Reproduce

Create an app with layout, build & start, and you should be able to see the twice downloading on the latest firefox.

Expected behavior

Despite of preloading or not, I only want one time downloading.

Information about your SvelteKit Installation:

Diagnostics

  System:
    OS: Linux 5.8 Noname Linux
    CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics
    Memory: 20.62 GB / 30.36 GB
    Container: Yes
    Shell: 5.0.7 - /bin/bash
  Binaries:
    Node: 14.13.1 - /bin/node
    Yarn: 1.22.10 - ~/.npm-packages/bin/yarn
    npm: 6.14.8 - /bin/npm
  Browsers:
    Firefox: 86.0.1
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.74 
    svelte: ^3.37.0 => 3.37.0 
    vite: ^2.1.5 => 2.1.5

Your browser: firefox 86.0.1
Your adapter: vercel, but I am experimenting with npm run start.

Severity

I think it can be a major bug, nobody like downloading things twice.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 27 (18 by maintainers)

Most upvoted comments

Not sure if I should open a new issue on this, but I am seeing this issue with Firefox (103.0.2) on latest sveltekit/vite. It seems it has crept up again.

To reproduce, you can check against https://kit.svelte.dev/ where the issue is visible in devtools/network. Some files are loaded twice and even three times (favicon). This is showing 202kB (Chrome) vs 240kB (Firefox) transferred (with cache disabled) in 36 (Chrome) vs 50 (Firefox) requests.

frankmayer on Aug 30, 2022

Thanks for the update! I’ll go ahead and close this now since it’s been fixed in Vite. 3.2.0 final should be released soon

benmccann on Oct 20, 2022

This issue is still there and makes the lighthouse performance score lower. Even in the official SvelteKit site this is happening. After checking this on different browsers, what @benmccann is mentioning on https://github.com/sveltejs/kit/issues/1042#issuecomment-821918949 , it seems that the bug still exists.

silvestrevivo on Jul 15, 2021

Support for modulepreload is pretty scattered according to https://caniuse.com/link-rel-modulepreload, wouldn’t it be safer to opt-in Chrome and Chromium-based Edge specifically? I just ran into this double download issue with a bone stock npm init @svelte@next with starter app, but I may be the only person left on Earth who uses FF as their daily driver.

Screen Shot 2021-05-21 at 11 21 57 PM

56k of JS while on Chrome I get 40k.

johnnysprinkles on May 22, 2021

Is it acceptable to ping someone in the issue body, instead of comments? benmccann filed that sapper issue, so I think he can help with the issue. Will it be better if it is started with do you have free time? Or maybe a chat room?

That will depend on the repo and how the maintainer team prefers to work. In some repos that can be acceptable, but it’s usually unnecessary since benmccann is also a maintainer and will be auto-notified of new issues (unless he’s chosen to turn that off). Here, since you have been requested by the repo owner not to do it, I’d avoid it altogether.

The Svelte Discord chat room is a good place to ping people if you think they will want to know about an issue. It’s generally acceptable to ping people in a Discord chat room, since that does not create an email notification and they’ll only see it when they next visit the chatroom. Though there, too, you should wait a few days before pinging anyone, since pinging people immediately comes across as demanding their time. (And “a few days” should be understood as “a few business days”, e.g. allow extra time if it’s the weekend, or if it’s a major holiday in the country/countries the maintaner(s) are from.)

The Discord chat room is also a good place to mention something if you’re not quite sure whether it’s a bug or not. Good rule of thumb if you’re not sure is to create a minimal example that reproduces the bug, either on the Svelte REPL or in a GitHub repo if you can’t create a REPL reproduction (for example, anything related to routing can’t be reproduced in the REPL). Then post a link to your bug reproduction on Discord and ask if that’s a bug, or if you’re making a mistake somewhere. Then if others agree that it’s a bug, open an issue here.

rmunn on Apr 18, 2021