sveltejs / sveltejs/kit

`adapter-cloudflare` seems to undo all code splitting, and worse

Open
#2,963 19 comments 17 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

  • #15574 by @teemingc — closed without merging
  • #15627 by @teemingc — closed without merging
pkg:adapter-cloudflare
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the bug

I'm using cloudflare-adapter to deploy to Cloudflare Pages. My _worker.js is growing to ridiculous sizes, perhaps most relevantly, it's larger than my app with all its chunks!

$ du -sh --apparent-size .svelte-kit/output/ .svelte-kit/cloudflare/
1.2M	.svelte-kit/output/
3.4M	.svelte-kit/cloudflare/

My biggest dependency is mapboxgl, and I see it minified in .svelte-kit/cloudflare/**/_app/chunks/vendor-*.js. But, I also see it embedded in .svelte-kit/cloudflare/_worker.js. Why is it both split and not split?

Reproduction

TBD

Logs
$ npm run build
[ everything here is under 44 KiB ] 
.svelte-kit/output/client/compare/_app/chunks/vendor-6f46024b.js                                        901.61 KiB / gzip: 246.75 KiB

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
vite v2.6.13 building SSR bundle for production...
✓ 77 modules transformed.
.svelte-kit/output/server/app.js   106.58 KiB

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-cloudflare
  ✔ done
System Info
System:
    OS: Linux 5.14 NixOS 21.11 (Porcupine) 21.11 (Porcupine)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 36.93 GB / 62.61 GB
    Container: Yes
    Shell: 5.1.8 - /nix/store/xdxv22yb7qnjfyf997r9fx804761z14c-bash-interactive-5.1-p8/bin/bash
  Binaries:
    Node: 16.13.0 - /nix/store/26lslfmvwyhspppbinznh111fyaxx62z-nodejs-16.13.0/bin/node
    npm: 8.1.0 - /nix/store/26lslfmvwyhspppbinznh111fyaxx62z-nodejs-16.13.0/bin/npm
  Browsers:
    Firefox: 94.0.2
  npmPackages:
    @sveltejs/adapter-cloudflare: ^1.0.0-next.2 => 1.0.0-next.2
    @sveltejs/kit: next => 1.0.0-next.191
    svelte: ^3.34.0 => 3.44.0
Severity

blocking an upgrade

Additional Information

This is severe because Cloudflare Workers _worker.js limit is only 1.5 MB, and importing mapboxgl without splitting uses a huge part of that.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with the reported npm run build flow and inspect .svelte-kit/cloudflare/_worker.js alongside .svelte-kit/cloudflare/**/_app/chunks/vendor-*.js. Compare the generated worker with .svelte-kit/output/server/app.js to determine why dependencies appear in both places. Done means the Cloudflare worker no longer unnecessarily duplicates code-split dependencies and remains within the platform size limit.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
build-system, cloud
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.