perf: only have Vite generate relative paths when required

[benmccann]

Even after sveltejs/svelte#8868 is merged this is still a bit better for performance in the case that you're not using relative paths.

[changeset-bot]

🦋 Changeset detected

Latest commit: 2525a0e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@sveltejs/kit	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[dummdidumm]

Are we sure that will work correctly in all environments? I'm a bit surprised that everything works as expected today. Why did we not forward the base path to Vite when building before? Like, if you serve your app from <host>/foo the URLs are still ./..., how did that work? Why didn't we have to apply the same logic as for ssr?

[benmccann]

Are we sure that will work correctly in all environments?

I can't think of a reason it'd break and all our tests pass. I can't think of anything I'd do to gain more confidence in it. If it does break we can revert it and add a test to prevent future regression

I'm a bit surprised that everything works as expected today. Why did we not forward the base path to Vite when building before? Like, if you serve your app from /foo the URLs are still ./..., how did that work? Why didn't we have to apply the same logic as for ssr?

./ is how you tell Vite to build the output using relative paths. You can do that and it will work in all scenarios, but it's a bit more expensive from a performance standpoint. This is just opting us out in a case where we know it's going to work with standard paths as opposed to relative paths.

[dummdidumm]

Where in the build output can I see the difference. For example in kit.svelte.dev, if I look at the hero image code, where would I see the difference? Right now I'm not seing any when flipping relative to true/false.

[benmccann]

There's no difference on kit.svelte.dev because it sets paths.relative: true:

kit/sites/kit.svelte.dev/svelte.config.js

Line 11 in a7bffde

relative: true

[dummdidumm]

I know, but I commented it out and it didn't make a difference. So how can I construct an example to see the difference?

[benmccann]

Ah! Thanks for testing. It turns out Vite has an undocumented behavior of also treating '' as relative, so I needed to add a '/' fallback. Here's some sample output from the file named 3.xxx.js

before

}const ws={avif:[{src:""+new URL("../assets/pudding.d9db5f9a.avif",import.meta.url).href,w:640}],webp:[{src:""+new URL("../assets/pudding.93e04b71.webp",import.meta.url).href,w:640}]},bs={src:""+new URL("../assets/pudding.d1019786.png",import.meta.url).href,w:640,h:363},_s={sources:ws,img:bs},Is={avif:[{src:""+new URL("../assets/pocketbase.3ca363c9.avif",import.meta.url).href,w:640}],webp:[{src:""+new URL("../assets/pocketbase.9b6a0dc9.webp",import.meta.url).href,w:640}]},ys={src:""+new URL("../assets/pocketbase.e3d830e1.png",import.meta.url).href,w:640,h:374},Cs={sources:Is,img:ys},Ms={avif:[{src:""+new URL("../assets/pronauns.58271e35.avif",import.meta.url).href,w:640}],webp:[{src:""+new URL("../assets/pronauns.cfe36d51.webp",import.meta.url).href,w:640}]},ks={src:""+new URL("../assets/pronauns.2b71efd0.png",import.meta.url).href,w:640,h:374},Ls={sources:Ms,img:ks},As={avif:[{src:""+new URL("../assets/pausly.0d1b4d08.avif",import.meta.url).href,w:640}],webp:[{src:""+new URL("../assets/pausly.ab7653e4.webp",import.meta.url).href,w:640}]},$s={src:""+new URL("../assets/pausly.7f0aec74.png",import.meta.url).href,w:640,h:373},Hs={sources:As,img:$s},js={avif:[{src:""+new URL("../assets/asmeditor.622de333.avif",import.meta.url).href,w:640}],webp:[{src:""+new URL("../assets/asmeditor.0790ab1e.webp",import.meta.url).href,w:640}]},Ss={src:""+new URL("../assets/asmeditor.43bd85be.png",import.meta.url).href,w:640,h:362},Js={sources:js,img:Ss},Ds={avif:[{src:""+new URL("../assets/monogram.95620fb8.avif",import.meta.url).href,w:640}],webp:[{src:""+new URL("../assets/monogram.ad5b0693.webp",import.meta.url).href,w:640}]},Gs={src:""+new URL("../assets/monogram.8179c09c.png",import.meta.url).href,w:640,h:363},Rs={sources:Ds,img:Gs},Vs={avif:[{src:""+new URL("../assets/raster.f581cf9e.avif",import.meta.url).href,w:640}],webp:[{src:""+new URL("../assets/raster.d9d5933f.webp",import.meta.url).href,w:640}]},Ws={src:""+new URL("../assets/raster.c7cc9927.png",import.meta.url).href,w:640,h:374},zs={sources:Vs,img:Ws},Zs={avif:[{src:""+new URL("../assets/tradingstrategy.55f22c1a.avif",import.meta.url).href,w:640}],webp:[{src:""+new URL("../assets/tradingstrategy.d95c8a80.webp",import.meta.url).href,w:640}]},Bs={src:""+new URL("../assets/tradingstrategy.ed918833.png",import.meta.url).href,w:640,h:365},Ns={sources:Zs,img:Bs}

after

const bs={avif:[{src:"/_app/immutable/assets/pudding.d9db5f9a.avif",w:640}],webp:[{src:"/_app/immutable/assets/pudding.93e04b71.webp",w:640}]},_s={src:"/_app/immutable/assets/pudding.d1019786.png",w:640,h:363},ws={sources:bs,img:_s},Is={avif:[{src:"/_app/immutable/assets/pocketbase.3ca363c9.avif",w:640}],webp:[{src:"/_app/immutable/assets/pocketbase.9b6a0dc9.webp",w:640}]},ys={src:"/_app/immutable/assets/pocketbase.e3d830e1.png",w:640,h:374},Cs={sources:Is,img:ys},Ms={avif:[{src:"/_app/immutable/assets/pronauns.58271e35.avif",w:640}],webp:[{src:"/_app/immutable/assets/pronauns.cfe36d51.webp",w:640}]},ks={src:"/_app/immutable/assets/pronauns.2b71efd0.png",w:640,h:374},As={sources:Ms,img:ks},$s={avif:[{src:"/_app/immutable/assets/pausly.0d1b4d08.avif",w:640}],webp:[{src:"/_app/immutable/assets/pausly.ab7653e4.webp",w:640}]},Ls={src:"/_app/immutable/assets/pausly.7f0aec74.png",w:640,h:373},Hs={sources:$s,img:Ls},js={avif:[{src:"/_app/immutable/assets/asmeditor.622de333.avif",w:640}],webp:[{src:"/_app/immutable/assets/asmeditor.0790ab1e.webp",w:640}]},Ss={src:"/_app/immutable/assets/asmeditor.43bd85be.png",w:640,h:362},Js={sources:js,img:Ss},Ds={avif:[{src:"/_app/immutable/assets/monogram.95620fb8.avif",w:640}],webp:[{src:"/_app/immutable/assets/monogram.ad5b0693.webp",w:640}]},Gs={src:"/_app/immutable/assets/monogram.8179c09c.png",w:640,h:363},Vs={sources:Ds,img:Gs},Ws={avif:[{src:"/_app/immutable/assets/raster.f581cf9e.avif",w:640}],webp:[{src:"/_app/immutable/assets/raster.d9d5933f.webp",w:640}]},zs={src:"/_app/immutable/assets/raster.c7cc9927.png",w:640,h:374},Zs={sources:Ws,img:zs},Bs={avif:[{src:"/_app/immutable/assets/tradingstrategy.55f22c1a.avif",w:640}],webp:[{src:"/_app/immutable/assets/tradingstrategy.d95c8a80.webp",w:640}]},Ns={src:"/_app/immutable/assets/tradingstrategy.ed918833.png",w:640,h:365},Ys={sources:Bs,img:Ns};function At(i,e,s){const a=i.slice();return a[1]=e[s].url,a[2]=e[s].image,a}function $t(i){let e,s,a,t,r=i[1]+"",n,v,f;return s=new Vt({props:{src:i[2],alt:"",style:"width:100%; height:100%; object-fit:cover"}}),{c(){e=u("a"),F(s.$$.fragment),a=h(),t=u("span"),n=St(r),v=h(),this.h()},l(g){e=d(g,"A",{href:!0,target:!0,rel:!0,class:!0});var 

[dummdidumm]

I tested this some more on preview and ran into an unrelated problem I thought is worth to write down (maybe we should create a Svelte issue from this). The problem is that the {...$$restProps} in the image components results in a set_attributes(img2, img_data); call after the hydration, which results in all the properties getting iterated, including src and possibly srcset, at which point we have the same potential mismatch again.

[danieldiekmeier]

I just ran into a problem using @sveltejs/kit@1.22.1 that I think is related to this change: If you use adapter-static and set a custom base path, the modulepreload paths are no longer relative. This broke my site that I deployed in a subfolder. Downgrading to 1.22.0 fixed the problem. I can also create a reproduction if that helps?

[benmccann]

If you're deploying in a subfolder you probably should set paths.relative. Perhaps we should mention this in the adapter-static docs