FSD Frontend System Design

Part III — The Speed · Lesson 5.7

Build Optimization

In one lineShip only the code this route needs, compress it, and let the browser cache it forever.

Where you've seen itA login page that downloads the charting library, the admin panel, and every locale file before it can show two input fields.

  • Time17 min
  • DiagramBundle treemap before/after + caching split
  • Chapter5 · Performance

Diagram

diagram
BUNDLE TREEMAP — where 480KB actually went

  BEFORE                                AFTER
  ┌────────────────────────────┐       ┌──────────────────┐
  │ moment.js + all locales    │       │ react-dom  38KB  │
  │            180KB           │       ├──────────────────┤
  ├──────────────┬─────────────┤       │ app        44KB  │
  │ lodash (full)│ react-dom   │       ├────────┬─────────┤
  │     71KB     │    38KB     │       │date-fns│ router  │
  ├──────────────┼─────────────┤       │  6KB   │  9KB    │
  │ admin panel  │  charts     │       └────────┴─────────┘
  │    92KB      │   55KB      │        97KB initial
  ├──────────────┴─────────────┤        admin + charts split
  │ app code 44KB              │        to lazy routes
  └────────────────────────────┘

  480KB → 97KB initial. Nothing was rewritten.
diagram
THE FOUR MOVES, IN ORDER OF PAYOFF

  1. SPLIT     route-level lazy imports        biggest, easiest win
               ├─ admin panel → its own chunk
               └─ charts → loaded on demand

  2. REPLACE   moment → date-fns/dayjs         180KB → 6KB
               lodash → lodash-es + named      71KB → 4KB
               heavy UI kit → the 3 parts you use

  3. SHAKE     ESM + sideEffects:false         drops unused exports
               (CommonJS imports can't be tree-shaken)

  4. COMPRESS  Brotli at build time            ~15% under gzip
diagram
CACHING SPLIT — hash the content, cache forever

  vendor.a3f9c1.js   Cache-Control: max-age=31536000, immutable
  app.7b2e04.js      changes every deploy, new hash → new URL
  index.html         Cache-Control: no-cache  ← always revalidated

  Filename hashing means you never invalidate; you just stop
  referencing the old file.

How it works

  1. Measure first with source-map-explorer or rollup-plugin-visualizer — optimising a bundle you haven't seen is guessing.
  2. Split by route, then by interaction (modals, editors, charts) using dynamic import().
  3. Replace the heavyweights. A handful of dependency swaps usually beats weeks of code-level tuning.
  4. Enable tree shaking properly: ESM output, "sideEffects": false where true, and named imports — import { debounce } from 'lodash-es', never the default import.
  5. Hash filenames and cache immutably, keeping vendor and app code in separate chunks so a feature deploy doesn't invalidate React.
js
// route-level split — the single highest-value change
const Admin = lazy(() => import('./routes/Admin'));

// interaction-level split — load the editor when it's opened
const openEditor = async () => {
  const { Editor } = await import('./Editor');
  mount(Editor);
};

Trade-offs

TechniqueWinCost
Route splittingLarge, immediateLoading states per route
Too many chunks—Request overhead, waterfalls
Dependency replacementOften the biggest single winMigration effort
Immutable cachingRepeat visits near-freeRequires hashed filenames
Preloading next routeFeels instantWasted bytes if unused

Don't over-split. Twenty tiny chunks on a slow connection can be slower than three sensible ones — and on HTTP/1.1 it's much worse (see 1.4).

Interview angle

"Your bundle is 500KB. Where do you start?"

  • Open the treemap first — in most apps two or three dependencies own half the weight.
  • Route-split, replace the heavyweights, verify tree shaking is actually happening (named ESM imports, sideEffects).
  • Lock it in with a size-limit gate in CI (4.5), or it grows straight back next quarter.

Recap

  • Measure the treemap, split by route, replace heavy dependencies, compress.
  • Tree shaking needs ESM and honest sideEffects — CommonJS silently defeats it.
  • Hashed filenames plus immutable caching make repeat visits nearly free.