Bundling & code-splitting economics

Core details

• Bundle analyzer first: rank modules by gzip/brotli impact; chase the top cohort before micro-opts.
• Route-level splitting with dynamic import() when navigation shells are predictable; prefetch with intent (hover, near-viewport)—measure waste on constrained networks.
• Tree-shaking needs real ESM boundaries and accurate package.json sideEffects; wrong false breaks builds silently until edge cases explode.
• Barrel exports (export * from) commonly hide tree-shake opportunities—expose narrow public entry modules.

Understanding

Splits move cost from initial load into later navigations. That improves outcomes only when deferred routes aren't on your activation critical path. Otherwise you lengthen time-to-task with extra round trips—you prove the trade against navigation profiles tied to KPIs—not gzip bragging alone.

Teams accumulate duplicate transitive dependencies (five date/format/icon stacks) disguised behind convenience imports; analyzers show clusters ripe for consolidation and internal shared utilities.

Senior understanding

Call out tail latency on low devices: thin medians mask fat cold-start splits during real navigation sequences field RUM reconciled synthetic lab balanced succinct tone crisp final.

Diagram

See also

• Networking, caching & HTTP
• /frontend