perf: bundle optimization audit — 4.71 MB → 186 KB initial load

[DatGreekChick]

Overview

A full audit of the client bundle was conducted using Bun's metafile option, which outputs meta.json and meta.md with per-module output contribution data. The audit identified several high-impact dependencies shipping far more code than the app actually used.

Config

To regenerate the analysis, add the following to Bun.build() in build.js, run bun start, then inspect public/meta.json and public/meta.md.

metafile: {
  json: './meta.json',
  markdown: './meta.md',
},

Results

Stage	Total	Initial load	Change from previous	Cumulative reduction
Baseline	4.71 MB	4.71 MB	—	—
react-icons swap	838 KB	838 KB	-82%	-82%
CSS spinner + Firestore Lite	641 KB	641 KB	-24%	-86%
react-spring removal	590 KB	590 KB	-8%	-87.5%
Code splitting	590 KB	186 KB	-68% initial load	-87.5% total / -96% initial load
Net	4.12 MB saved	4.52 MB saved		-87.5% total / -96% initial load

PRs

• refactor(icons): replace @fortawesome with react-icons #390 — shipped the entire FA icon library (1.73 MB) despite only 7 icons being used; react-icons tree-shakes to ~7 KB 😱
• refactor(spinner): replace react-loader-spinner with inline SVG animation #391 — react-loader-spinner vendored its own copy of styled-components, resulting in two copies in the bundle; replaced with a plain SVG using the project's existing styled-components
• refactor(firebase): switch to firestore/lite for lighter bundle #392 — the full Firestore SDK includes WebChannel/gRPC transport for real-time listeners the app doesn't use; lite SDK is a drop-in replacement for one-shot reads
• refactor(home): replace @react-spring with CSS keyframe animation #393 — useTransition on the home page word carousel replaced with @keyframes via styled-components; removed the entire react-spring dependency tree (core, shared, animated, rafz, tinycolor2)
• refactor(build): enable code splitting and fix lazy route imports #394 — lazy-loaded routes (Articles, Contact, Work) were all importing from the barrel file, causing Bun to treat them as one module; pointing each at its component file and enabling splitting: true defers 0.41 MB of shared dependencies until after first paint

What was considered but not pursued

Getting the bundle under 300 KB is not feasible without a significant rewrite. react + react-dom + react-router alone account for ~314 KB — already over the target before any app code loads. Reaching 300 KB would require switching to Preact (~4 KB vs 188 KB for react + react-dom), replacing react-router with something like wouter (~2 KB), dropping styled-components for CSS modules, and removing Redux. That's effectively a full rewrite and not worth the effort given the 96% initial load reduction already achieved.