#decreasing bundle size for next.js and cloudflare pages workers

1 messages · Page 1 of 1 (latest)

weak wedge
#

Background

I have a Next.js app on Cloudflare Pages (aka Workers). When I tried deploying the app, then I started receiving errors on Cloudflare pages mentioning "You have exceeded the Paid plan's max. bundle size (10 mb gzipped)".

Issue

I started analysing the bundle. The conclusion is when I wrap the nextConfig with withSentryConfig, the app's bundle size increases by 400% (5mb -> 25mb) which are mostly edge functions. On average, **each **edge function's size increased by 1.4mb (from 0.1mb->1.5mb).

My attempt

1

Implemented the recommended "Tree Shaking With Next.js" web pack config at https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/#tree-shaking-with-nextjs. Decreased the bundle size from 25.6mb -> 25.5mb.

2

I removed all 3 sentry.*.config.ts and instrumentation.ts files. Decreased the bundle size from 25.5mb -> 24.3mb.

3

I removed the withSentryConfig from next.config.mjs. Decreased the bundle size from 24.3mb -> 4.5mb.

**Q1: **Has anyone come across the same issue, and managed to solve it?
Q2: What are my options to decrease the bundle size?

tidal pawn
#

I removed the withSentryConfig from next.config.mjs

So this seems to the problem. Are you able to check what assets are being uploaded to cloudflare? Is cloudflare accidently adding the next config files (plus it's dependencies) to the bundle?

#

https://www.npmjs.com/package/@next/bundle-analyzer may help here too

npm
@next/bundle-analyzer

Use webpack-bundle-analyzer in your Next.js project. Latest version: 14.2.5, last published: 12 days ago. Start using @next/bundle-analyzer in your project by running npm i @next/bundle-analyzer. There are 198 other projects in the npm registry using @next/bundle-analyzer.

#

also, are you deploying a static deployment to cloudflare pages? Or a full-stack next.js app?

weak wedge
#

full-stack next.js app

#

Are you able to check what assets are being uploaded to cloudflare?
I will check my previous deployments and let you know

tidal pawn
#

I think you can look at .vercel/output/static to see the final built assets

weak wedge
#

i will do a rollback, will be back in 2 mins

weak wedge
tidal pawn
#

Do you know what could be contributing to that increase?

weak wedge
#

Tbh I am not sure how exactly Sentry increases each edge function's size by 1.5mb (~1400%) even when I delete sentry.*.config.ts + instrumentation.ts, that's why I came to the Discord server :')

tidal pawn
#

I've never seen this before either 😅

#

if you can create a minimal repro with just a plain nextjs cloudflare app and open a GH issue

#

we can get an sdk maintainer to triage and help take a look!

#

it's probably something simple I'm missing, but hard to tell without being able to see the code directly

weak wedge
tidal pawn
#

thanks for the help!

weak wedge
#

no worries, thank you too

weak wedge
weak wedge
tidal pawn
#

sure my email is aprasad @ sentry . io (remove all spaces) - feel free to share, I'll take a look tomorrow morning!

this my GH: https://github.com/AbhiPrasad

GitHub
AbhiPrasad - Overview

Building SDKs @getsentry, @uWaterloo SYDE Grad. AbhiPrasad has 105 repositories available. Follow their code on GitHub.

weak wedge
weak wedge
tidal pawn
#

great got the invite ty ty - unfortunately got busy with some other tasks in the morning, but you're top of my todo after lunch 🙂

weak wedge
cyan jungle
#

Bump, running into the same issue.

weak wedge
plucky ingot
#

I have the same issue.