preload does not work and downloaded twice on firefox

Describe the bug

1. 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.

2. 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) => {

1. 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.

[frankmayer]

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.

[benmccann]

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