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.

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

vite-imagetools transforms images twice during build #11120

Closed
rubenesque-code opened this issue Nov 23, 2023 · 1 comment · Fixed by #12055
Closed

vite-imagetools transforms images twice during build #11120

rubenesque-code opened this issue Nov 23, 2023 · 1 comment · Fixed by #12055
Labels
bug Something isn't working pkg:enhanced-img vite

Comments

@rubenesque-code
Copy link

rubenesque-code commented Nov 23, 2023

Describe the bug

I've got a Sveltekit site deployed to Vercel. I'm using SvelteKit's SSG configuration (using adapter-static). The builds are successful but take a long time (~25mins) due to, it seems:

  1. re-creation of static assets (mostly images) on each deploy.
  2. duplication of static asset creation for client and server.

With regard to the second point, I'm not sure if this should be happening because I'm using static site generation.

A snippet of a log has been posted below. Please note the duplication in output/client/... and output/server/....
Please see attached full log files for more which shows duplication of asset creation on each deploy (each log is more or less the same).
deploy 1 log.txt
deploy 2 log.txt

Reproduction

https://github.com/code-sanchu/alesh_compton-v1.1

Logs

[17:47:04.797] Running build in Washington, D.C., USA (East) – iad1 (Hive)
[17:47:04.918] Cloning github.com/code-sanchu/alesh_compton-v1.1 (Branch: main, Commit: d53c032)
[17:47:08.256] Cloning completed: 3.338s
[17:47:08.499] Restored build cache
[17:47:08.575] Running "vercel build"
[17:47:09.047] Vercel CLI 32.5.6
[17:47:09.769] Detected pnpm-lock.yaml version 6 generated by pnpm 8
[17:47:09.787] Installing dependencies...
[17:47:10.547] Lockfile is up to date, resolution step is skipped
[17:47:10.615] Packages: +4
[17:47:10.615] ++++
[17:47:11.129]
[17:47:11.146] Done in 1.3s
[17:47:11.170] Running "pnpm run build"
[17:47:11.647]
[17:47:11.647] > [email protected] build /vercel/path0
[17:47:11.648] > vite build
[17:47:11.648]
[17:47:11.850] ▲ [WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]
[17:47:11.850]
[17:47:11.851] tsconfig.json:2:12:
[17:47:11.851] 2 │ "extends": "./.svelte-kit/tsconfig.json",
[17:47:11.851] ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[17:47:11.851]
[17:47:12.634]
[17:47:12.635] [36mvite v4.4.2 [32mbuilding SSR bundle for production...[36m[39m
[17:47:12.672] transforming...
[17:58:55.103] [32m✓[39m 2800 modules transformed.
[17:58:55.332] rendering chunks...
[17:58:56.436]
[17:58:56.436] [36mvite v4.4.2 [32mbuilding for production...[36m[39m
[17:58:56.450] transforming...
[18:11:14.679] [32m✓[39m 2812 modules transformed.
[18:11:15.082] rendering chunks...
[18:11:16.224] computing gzip size...
[18:11:16.413] [2m.svelte-kit/output/client/[22m[32m_app/version.json [39m[1m[2m 0.03 kB[22m[1m[22m[2m │ gzip: 0.05 kB[22m
[18:11:16.414] [2m.svelte-kit/output/client/[22m[32m_app/immutable/assets/youtube-icon.06e8af7c.avif [39m[1m[2m 1.66 kB[22m[1m[22m
[18:11:16.414] [2m.svelte-kit/output/client/[22m[32m_app/immutable/assets/youtube-icon.0b692429.webp [39m[1m[2m 2.86 kB[22m[1m[22m
[18:11:16.414] [2m.svelte-kit/output/client/[22m[32m_app/immutable/assets/buy%20now%20Button.67f1fa5d.avif [39m[1m[2m 3.55 kB[22m[1m[22m
[18:11:16.416] [2m.svelte-kit/output/client/[22m[32m_app/immutable/assets/youtube-icon.5134cc24.jpg [39m[1m[2m 4.05 kB[22m[1m[22m
[18:11:16.416] [2m.svelte-kit/output/client/[22m[32m_app/immutable/assets/buy%20now%20Button.88ac1a88.webp [39m[1m[2m 5.84 kB[22m[1m[22m
[18:11:16.416] [2m.svelte-kit/output/client/[22m[32m_app/immutable/assets/logo.cc812ab9.jpg [39m[1m[2m 7.42 kB[22m[1m[22m
[18:11:16.416] [2m.svelte-kit/output/client/[22m[32m_app/immutable/assets/estat_du_france-yt_thumbnail.2ad4e782.avif [39m[1m[2m 7.55 kB[22m[1m[22m
[18:11:16.417] [2m.svelte-kit/output/client/[22m[32m_app/immutable/assets/squatumentary_doc-yt_thumbnail.672b3a06.avif [39m[1m[2m 8.73 kB[22m[1m[22m
[18:11:16.417] [2m.svelte-kit/output/client/[22m[32m_app/immutable/assets/slimey_skumbaagz-yt_thumbnail.e6a6ed7b.avif [39m[1m[2m 9.08 kB[22m[1m[22m
[18:11:16.417] [2m.svelte-kit/output/client/[22m[32m_app/immutable/assets/logo.6c0741a1.avif [39m[1m[2m 9.11 kB[22m[1m[22m
[18:11:16.417] [2m.svelte-kit/output/client/[22m[32m_app/immutable/assets/HOODIE.9a885f70.avif [39m[1m[2m 10.53 kB[22m[1m[22m

[... more log output cut here]

[18:11:16.546] [32m✓ built in 12m 20s[39m
[18:11:17.837] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/youtube-icon.06e8af7c.avif [39m[1m[2m 1.66 kB[22m[1m[22m
[18:11:17.842] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/youtube-icon.0b692429.webp [39m[1m[2m 2.86 kB[22m[1m[22m
[18:11:17.842] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/buy%20now%20Button.67f1fa5d.avif [39m[1m[2m 3.55 kB[22m[1m[22m
[18:11:17.843] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/youtube-icon.5134cc24.jpg [39m[1m[2m 4.05 kB[22m[1m[22m
[18:11:17.843] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/buy%20now%20Button.88ac1a88.webp [39m[1m[2m 5.84 kB[22m[1m[22m
[18:11:17.843] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/logo.cc812ab9.jpg [39m[1m[2m 7.42 kB[22m[1m[22m
[18:11:17.843] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/estat_du_france-yt_thumbnail.2ad4e782.avif [39m[1m[2m 7.55 kB[22m[1m[22m
[18:11:17.843] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/squatumentary_doc-yt_thumbnail.672b3a06.avif [39m[1m[2m 8.73 kB[22m[1m[22m
[18:11:17.843] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/slimey_skumbaagz-yt_thumbnail.e6a6ed7b.avif [39m[1m[2m 9.08 kB[22m[1m[22m
[18:11:17.843] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/logo.6c0741a1.avif [39m[1m[2m 9.11 kB[22m[1m[22m
[18:11:17.843] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/HOODIE.9a885f70.avif [39m[1m[2m 10.53 kB[22m[1m[22m
[18:11:17.843] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/Reversible%20Polo%20button.5848f8fb.avif [39m[1m[2m 10.89 kB[22m[1m[22m
[18:11:17.843] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/buy%20now%20Button.e56563cb.jpg [39m[1m[2m 11.03 kB[22m[1m[22m
[18:11:17.843] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/9.210d6d61.avif [39m[1m[2m 11.06 kB[22m[1m[22m
[18:11:17.843] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/6.4a2e5d2d.avif [39m[1m[2m 11.47 kB[22m[1m[22m
[18:11:17.844] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/logo.224d030d.webp [39m[1m[2m 12.12 kB[22m[1m[22m
[18:11:17.844] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/midnight-yt_thumbnail.3b3d398b.avif [39m[1m[2m 14.37 kB[22m[1m[22m
[18:11:17.844] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/kurukuru-yt_thumbnail.8a1f5232.avif [39m[1m[2m 14.59 kB[22m[1m[22m
[18:11:17.844] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/slimey_skumbaagz-yt_thumbnail.979aa7d2.webp [39m[1m[2m 14.88 kB[22m[1m[22m
[18:11:17.844] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/6.7d4f4a93.avif [39m[1m[2m 15.69 kB[22m[1m[22m
[18:11:17.844] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/televsion_god-yt_thumbnail.fbf847a2.avif [39m[1m[2m 16.09 kB[22m[1m[22m
[18:11:17.844] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/slimey_skumbaagz-yt_thumbnail.3dcc762f.jpg [39m[1m[2m 16.44 kB[22m[1m[22m
[18:11:17.844] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/squatumentary_doc-yt_thumbnail.2283d6a6.webp [39m[1m[2m 17.25 kB[22m[1m[22m
[18:11:17.844] [2m.svelte-kit/output/server/[22m[32m_app/immutable/assets/HOODIE.c3ad167a.webp [39m[1m[2m 18.64 kB[22m[1m[22m

System Info

System:
  OS: Linux 6.1 Manjaro Linux
  CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
  Memory: 3.74 GB / 7.70 GB
  Container: Yes
  Shell: 5.9 - /bin/zsh System:
Binaries:
  Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
  Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
  npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  pnpm: 8.4.0 - ~/.nvm/versions/node/v18.16.0/bin/pnpm
npmPackages:
  svelte: ^4.0.5 => 4.0.5

Severity

annoyance

@benmccann benmccann transferred this issue from sveltejs/svelte Nov 24, 2023
@eltigerchino eltigerchino added the bug Something isn't working label Nov 25, 2023
@eltigerchino
Copy link
Member

eltigerchino commented Nov 25, 2023

The repeated asset transformation happens because SvelteKit runs vite build for the client and server bundles (and service worker?). This causes the transformation from the vite-imagetools plugin to run twice as well. Related to JonasKruckenberg/imagetools#522

As an aside, please provide a minimal reproduction instead of linking your entire project as this makes it difficult to reproduce the issue quickly and find the root cause.

@eltigerchino eltigerchino changed the title Using Vercel, the same static assets are created on each deploy and seemingly twice. vite-imagetools transforms images twice during build Nov 25, 2023
@benmccann benmccann added vite pkg:enhanced-img and removed bug Something isn't working labels Nov 27, 2023
@eltigerchino eltigerchino added the bug Something isn't working label Mar 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working pkg:enhanced-img vite
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants