Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf: apply performance optimization to dev srcset #12621

Merged
merged 1 commit into from
Aug 27, 2024
Merged

perf: apply performance optimization to dev srcset #12621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tricky-hats-flow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/enhanced-img': patch
---

perf: apply performance optimization to dev srcset
11 changes: 9 additions & 2 deletions packages/enhanced-img/src/preprocessor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,18 +281,25 @@ function img_to_picture(content, node, image) {
let res = '<picture>';

for (const [format, srcset] of Object.entries(image.sources)) {
res += `<source srcset={"${srcset}"}${sizes_string} type="image/${format}" />`;
res += `<source srcset=${to_value(srcset)}${sizes_string} type="image/${format}" />`;
}

res += `<img ${serialize_img_attributes(content, attributes, {
src: image.img.src.startsWith('__VITE_ASSET__') ? `{"${image.img.src}"}` : `"${image.img.src}"`,
src: to_value(image.img.src),
width: image.img.w,
height: image.img.h
})} />`;

return (res += '</picture>');
}

/**
* @param {string} src
*/
function to_value(src) {
return src.startsWith('__VITE_ASSET__') ? `{"${src}"}` : `"${src}"`;
}

/**
* For images like `<img src={manually_imported} />`
* @param {string} content
Expand Down
26 changes: 14 additions & 12 deletions packages/enhanced-img/test/Input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,29 @@

{foo}

<img src="./foo.png" alt="non-enhanced test" />
<img src="./dev.png" alt="non-enhanced test" />

<enhanced:img src="./foo.png" alt="basic test" />
<enhanced:img src="./dev.png" alt="dev test" />

<enhanced:img src="./foo.png" width="5" height="10" alt="dimensions test" />
<enhanced:img src="./prod.png" alt="production test" />

<enhanced:img src="./foo.png?blur=5" alt="directive test" />
<enhanced:img src="./dev.png" width="5" height="10" alt="dimensions test" />

<enhanced:img src="./foo.png" {...{ foo }} alt="spread attributes test" />
<enhanced:img src="./dev.png?blur=5" alt="directive test" />

<enhanced:img src="./dev.png" {...{ foo }} alt="spread attributes test" />

<enhanced:img
src="./foo.png?w=1024,640,320"
src="./dev.png?w=1024,640,320"
sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw"
alt="sizes test"
/>

<enhanced:img src="./foo.png" on:click={(foo = 'clicked an image!')} alt="event handler test" />
<enhanced:img src="./dev.png" on:click={(foo = 'clicked an image!')} alt="event handler test" />

<enhanced:img src="$lib/foo.png" alt="alias test" />
<enhanced:img src="$lib/dev.png" alt="alias test" />

<enhanced:img src="/src/foo.png" alt="absolute path test" />
<enhanced:img src="/src/dev.png" alt="absolute path test" />

<enhanced:img {src} alt="attribute shorthand test" />

Expand All @@ -41,7 +43,7 @@
{/each}

<picture>
<source src="./foo.avif" />
<source srcset="./foo.avif 500v ./bar.avif 100v" />
<source srcset="./foo.avif, ./bar.avif 1v" />
<source src="./dev.avif" />
<source srcset="./dev.avif 500v ./bar.avif 100v" />
<source srcset="./dev.avif, ./bar.avif 1v" />
</picture>
26 changes: 14 additions & 12 deletions packages/enhanced-img/test/Output.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,25 @@

{foo}

<img src="./foo.png" alt="non-enhanced test" />
<img src="./dev.png" alt="non-enhanced test" />

<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" alt="basic test" width=1440 height=1440 /></picture>
<picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" alt="dev test" width=1440 height=1440 /></picture>

<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" width="5" height="10" alt="dimensions test" width=1440 height=1440 /></picture>
<picture><source srcset={"__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w"} type="image/avif" /><source srcset={"__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w"} type="image/webp" /><source srcset={"__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w"} type="image/png" /><img src={"__VITE_ASSET__2AM7_y_g__"} alt="production test" width=1440 height=1440 /></picture>

<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" alt="directive test" width=1440 height=1440 /></picture>
<picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" width="5" height="10" alt="dimensions test" width=1440 height=1440 /></picture>

<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" {...{ foo }} alt="spread attributes test" width=1440 height=1440 /></picture>
<picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" alt="directive test" width=1440 height=1440 /></picture>

<picture><source srcset={"/1 1440w, /2 960w"} sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/avif" /><source srcset={"/3 1440w, /4 960w"} sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/webp" /><source srcset={"5 1440w, /6 960w"} sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/png" /><img src="/7" alt="sizes test" width=1440 height=1440 /></picture>
<picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" {...{ foo }} alt="spread attributes test" width=1440 height=1440 /></picture>

<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" on:click={(foo = 'clicked an image!')} alt="event handler test" width=1440 height=1440 /></picture>
<picture><source srcset="/1 1440w, /2 960w" sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/avif" /><source srcset="/3 1440w, /4 960w" sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/webp" /><source srcset="5 1440w, /6 960w" sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/png" /><img src="/7" alt="sizes test" width=1440 height=1440 /></picture>

<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" alt="alias test" width=1440 height=1440 /></picture>
<picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" on:click={(foo = 'clicked an image!')} alt="event handler test" width=1440 height=1440 /></picture>

<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" alt="absolute path test" width=1440 height=1440 /></picture>
<picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" alt="alias test" width=1440 height=1440 /></picture>

<picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" alt="absolute path test" width=1440 height=1440 /></picture>

{#if typeof src === 'string'}
<img src={src.img.src} alt="attribute shorthand test" width={src.img.w} height={src.img.h} />
Expand Down Expand Up @@ -58,7 +60,7 @@
{/each}

<picture>
<source src="./foo.avif" />
<source srcset="./foo.avif 500v ./bar.avif 100v" />
<source srcset="./foo.avif, ./bar.avif 1v" />
<source src="./dev.avif" />
<source srcset="./dev.avif 500v ./bar.avif 100v" />
<source srcset="./dev.avif, ./bar.avif 1v" />
</picture>
9 changes: 7 additions & 2 deletions packages/enhanced-img/test/preprocessor.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,13 @@ it('Image preprocess snapshot test', async () => {
},
// @ts-ignore
imagetools_plugin: {
load() {
return 'export default {sources:{avif:"/1 1440w, /2 960w",webp:"/3 1440w, /4 960w",png:"5 1440w, /6 960w"},img:{src:"/7",w:1440,h:1440}};';
load(id) {
if (id.includes('dev')) {
return 'export default {sources:{avif:"/1 1440w, /2 960w",webp:"/3 1440w, /4 960w",png:"5 1440w, /6 960w"},img:{src:"/7",w:1440,h:1440}};';
} else if (id.includes('prod')) {
return 'export default {sources:{avif:"__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w",webp:"__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w",png:"__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w"},img:{src:"__VITE_ASSET__2AM7_y_g__",w:1440,h:1440}};';
}
throw new Error(`unrecognized id ${id}`);
}
}
})
Expand Down
Loading