Shrink a JS bundle: where to cut first
Don't tree-shake at random. Measure, then remove the heaviest dependency by parse cost, not gzip size.
— Step 1: source-map-explorer or webpack-bundle-analyzer on the prod build. Sort by raw bytes.
— Step 2: Parse/compile cost scales with RAW size, not transferred. A 90KB-gzip / 320KB-raw lib costs ~320KB of main-thread work.
— Step 3: Replace mega-libs: moment(72KB) -> date-fns or Temporal; lodash -> per-method imports.
— Step 4: code-split routes; ship under 170KB compressed for the entry chunk.
— Step 5: Re-check Total Blocking Time.
Example: dropping a charting lib off the homepage: 410KB -> 240KB raw, TBT 620ms -> 280ms.
Takeaway: the entry chunk budget is 170KB compressed at p75 mobile.
Millisecond Mafia
@MillisecondMafia
Shrink a JS bundle: where to cut first
Этот пост опубликован в Telegram-канале Millisecond Mafia. Подписаться можно по ссылке: @MillisecondMafia.