alexanderniebuhr
commented
3 months ago Could this be the same as https://github.com/withastro/astro/issues/10552?
Closed dallyh closed 2 months ago
alexanderniebuhr
commented
3 months ago Could this be the same as https://github.com/withastro/astro/issues/10552?
dallyh
commented
3 months ago Looks like it, if it is then sorry that i created the issue here, i meanwhile added the content collection to the provided example, however I don't really know if the code for generating chunks for something like the <Code/> component is the same as generating chunks for the content collections. Thanks for pointing that issue to me!
alexanderniebuhr
commented
3 months ago All good tracking it here. We'll try to figure out where the issue occurs.
dallyh
commented
3 months ago I may have one question regarding this. Why did the previous version of the adapter generated _worker.js file, and now it is a _worker.js directory? Does it have to do anything with the mentioned ticket?
I was searching and it looks like the Pages deployment flow does not do any _worker.js bundling at all, and it will attach everything that is in that folder. I don't know if this is the case, but here https://community.cloudflare.com/t/refactor-a-worker-to-a-pages-function-problem/536838 (i know, it is not official from Cloudflare), one user mentions that:
When using advanced mode, you need to bundle the worker—Cloudflare Pages build system doesn’t handle the bundling (if I recall correctly.)
If I go and run npx wrangler deploy ./dist/_worker.js --dry-run --outdir ./dist/build --compatibility-date 2024-03-31 myself, the outputted bundle has 260 kilobytes.
I'm just being curious at this point :)
EDIT:
If I chain the commands like this, the build is succesfull and the page works (but I don't know to which extend.).
Commands:
"bundle-worker": "npx wrangler deploy ./dist/_worker.js --dry-run --outdir ./dist/build --compatibility-date 2024-03-31",
"build-cf": "pnpm run astro build && pnpm run bundle-worker && rm -rf ./dist/_worker.js && mv ./dist/build/_worker.js ./dist && rm -rf ./dist/build"CF's build output:
17:14:46.418 Executing user command: npm run build-cf
17:14:46.967
17:14:46.968 > astro-cf-10-issues@0.0.1 build-cf
17:14:46.968 > pnpm run astro build && pnpm run bundle-worker && rm -rf ./dist/_worker.js && mv ./dist/build/_worker.js ./dist && rm -rf ./dist/build
17:14:46.968
17:14:47.501
17:14:47.502 > astro-cf-10-issues@0.0.1 astro /opt/buildhome/repo
17:14:47.502 > astro "build"
17:14:47.502
17:14:49.474 15:14:49 [build] output: "hybrid"
17:14:49.475 15:14:49 [build] directory: /opt/buildhome/repo/dist/
17:14:49.475 15:14:49 [build] adapter: @astrojs/cloudflare
17:14:49.475 15:14:49 [build] Collecting build info...
17:14:49.476 15:14:49 [build] ✓ Completed in 530ms.
17:14:49.477 15:14:49 [build] Building hybrid entrypoints...
17:14:54.968 15:14:54 [vite] ✓ built in 5.46s
17:14:54.968 15:14:54 [build] ✓ Completed in 5.49s.
17:14:54.985
17:14:54.985 prerendering static routes
17:14:55.006 15:14:55 ▶ src/pages/test-2.astro
17:14:55.211 15:14:55 └─ /test-2/index.html (+204ms)
17:14:55.211 15:14:55 ✓ Completed in 233ms.
17:14:55.211
17:14:55.211 generating optimized images
17:14:55.214 15:14:55 ▶ /_astro/favicon.vp_fBu0c_1fShzE.svg (before: 0kB, after: 0kB) (+1ms) (1/1)
17:14:55.215 15:14:55 ✓ Completed in 2ms.
17:14:55.215
17:14:55.233 15:14:55
17:14:55.233 finalizing server assets
17:14:55.233
17:14:55.233 15:14:55 [build] Rearranging server assets...
17:14:55.238 15:14:55 [build] Server built in 6.29s
17:14:55.239 15:14:55 [build] Complete!
17:14:55.706
17:14:55.706 > astro-cf-10-issues@0.0.1 bundle-worker /opt/buildhome/repo
17:14:55.707 > npx wrangler deploy ./dist/_worker.js --dry-run --outdir ./dist/build --compatibility-date 2024-03-31
17:14:55.707
17:14:57.245 ⛅️ wrangler 3.39.0 (update available 3.41.0)
17:14:57.245 ---------------------------------------------
17:14:57.318 --dry-run: exiting now.
17:14:57.328 Total Upload: 257.03 KiB / gzip: 62.83 KiB
17:14:57.417 Finished
17:14:57.417 Found _worker.js in output directory. Uploading.
17:14:58.430 ✨ Compiled Worker successfully
17:14:58.489 Found _routes.json in output directory. Uploading.
17:14:58.502 Validating asset output directory
17:14:59.332 Deploying your site to Cloudflare's global network...
17:15:06.887 Uploading... (4/4)
17:15:06.887 ✨ Success! Uploaded 0 files (4 already uploaded) (0.42 sec)
17:15:06.888
17:15:07.276 ✨ Upload complete!
17:15:10.306 Success: Assets published!
17:15:13.182 Success: Your site was deployed!Site is here: https://96e116ec.astro-cf-10-issues.pages.dev/test-2/ and branch on the example repo here https://github.com/dallyh/astro-cf-10-issues/tree/create-worker-bundle.
You can see that the build output from Cloudflare differs a lot, as before it attached additional modules (looks like all of them) and also failed due to size limits.
EDIT2: Just tried it on my project, and it kinda works too, however the bundle size is strange depending on some factors like React and where it is used (which is probably to be expected).
Bundle without React component on an ondemand route:
⛅️ wrangler 3.41.0
-------------------
--dry-run: exiting now.
Total Upload: 245.62 KiB / gzip: 68.58 KiBBundle with React component on an ondemand route:
⛅️ wrangler 3.41.0
-------------------
--dry-run: exiting now.
Total Upload: 6080.26 KiB / gzip: 1878.34 KiB
▲ [WARNING] We recommend keeping your script less than 1MiB (1024 KiB) after gzip. Exceeding this can affect cold start time. Consider using Wrangler's `--minify` option to reduce your bundle size.
@dallyh We worked closely with the Cloudflare team and using a _wrangler.js directory instead of a _wrangler.js bundle, is the correct way.
dallyh
commented
3 months ago Got it, thanks. I'll wait for the upstream issue to get fixed, however bundling the directory could be taken as a workaround for now, because there's no other way to keep the functionality of everything and also keep the worker within the 1MB/10MB constraint. I'm worried that this could be an issue going forward with the current approach.
alexanderniebuhr
commented
3 months ago I flagged this with Astro core and the Cloudflare team to see why this happens, there shouldn't be unused code in the directory. But it sounds like bundling does tree-shake some things away, so we need to understand why and fix the initial output. Anyways, feel free to add this workaround in your project.
marceloverdijk
commented
3 months ago I'm also facing issues with Astro Cloudflare hybrid output. I see some code in the bundle that I would not expect.. and even causing failure to deploy.
I created a thread on Discord about this before finding this issue:
https://discord.com/channels/830184174198718474/1224835877721870516
Could this maybe be similar issue?
dallyh
commented
2 months ago I would like to add that minifying all of the outputted files (if possible) could also save few Kb's. Most of the files are generated as-is without any minification, like renderers, manifest, index etc.
tombl
commented
2 months ago Especially now that Workers supports sourcemaps, minification seems like a free size reduction.
alexanderniebuhr
commented
2 months ago @dallyh minifying would be something we would need to discuss in core, since the files are generated by astro build.
I just note that minifying the files had a history of making stack traces unusable in the past.
Astro Info
Describe the Bug
Hello, one thing that just came up. I'm using the
<Code/>component from Astro to highlight code. In previous version (9.2.0) there were no issues, everything worked great. However when I use this component in v10 of the adapter, the_worker.jsfolder size and final bundle size exceeds the free limit (1MB) and on my production site, the bundle with all of the additional scripts exceeds the Workers paid limit (10MB). The_workers.jsfolder has around 7.8MBs. Compared toworker.jsfrom previous version which had only a few kilobytes (about 100Kb), this is a huge bump in taken space. This looks like there is something wrong with the bundling, as there are many additional generated chunks which all contain CSS and or things for the<Code/>component.Log from build output with all of the chunks:
Steps to reproduce
_workers.jsfolder_workers.jsfileI would also like to add that I noticed when there are content collections used, there are also chunks generated for them. Again this is new one for me. This one is not in the provided example, and taken from my other website.
The provided example contains only theI have added a content collection to the example. The chunks are there (beginning with test-collection...).<Code/>component from above, but still it looks like it may be the same thing.For example those three chunks:
And the code looks like this (which to me looks like functions used to get data for the content collections):
And looks like the generated chunks are mostly not minified, though I don't know if Cloudflare does some minification or it should be done at the build step.
Thanks!
What's the expected result?
The bundle should not be of this size.
Link to Minimal Reproducible Example
https://github.com/dallyh/astro-cf-10-issues/tree/code-bundle-issue
Participation