First Load JS is 480 kB on my homepage, what is eating it?

Open · 274 views · asked last month by magnus_e · edited

next build output:

Route (app)                Size     First Load JS
┌ ○ /                      312 kB   480 kB
├ ○ /about                 1.2 kB   169 kB

The homepage is a landing page with a small chart and some icons. How do I find out what is in those 312 kB?

What I’ve tried

Removed framer-motion from the hero, it went from 340 to 312 kB. Not much.

Comment

Do you have "use client" at the top of page.tsx? oksana_k last month · edited

...yes. Cursor put it there for a hover effect. magnus_e last month · edited

3 answers

oksana_klast month · edited

Measure first:

npm i -D @next/bundle-analyzer
ANALYZE=true npm run build

(wrap your config with withBundleAnalyzer per its README). It opens a treemap per route.

Usual suspects on a landing page:

The chart library. Recharts/Chart.js are big. Load it lazily with next/dynamic so it's not in first load, or render a static SVG if the chart never changes.
import * as Icons from ... or an icon barrel. Import icons one by one.
A "use client" at the top of page.tsx or layout.tsx pulls every import below it into the bundle. Push it down to the smallest interactive component.

Comment

treemap shows recharts 140kB and date-fns-tz 60kB (for a footer date??). Dynamic import for the chart brought it to 330 kB. magnus_e last month · edited

aiko_nlast month · edited

For the footer date: new Intl.DateTimeFormat does timezone formatting natively, no library needed. And if it's just the year, new Date().getFullYear() in a server component ships zero JS.

Comment

lena_opslast month · edited

Also try experimental.optimizePackageImports for libraries with big barrel files. Next already does it for a list of common ones (lucide-react, date-fns and others), but it helps for libraries not on that list.

Comment

Keyboard shortcuts

First Load JS is 480 kB on my homepage, what is eating it?

What I’ve tried

3 answers

Your answer

First Load JS is 480 kB on my homepage, what is eating it?

What I’ve tried

3 answers

Related

Your answer