Episode 20 game · Vayu · Air
Shrink the Bloat Asura
Kai’s login page has two boxes and one button, and it downloads 1052 KB of JavaScript first. Feel the weight of one bag for every page, cut it with tree shaking and import(), then prove each page downloads only what it needs.
Not opened yet
On a slow phone: –
Open the page to weigh it.
1 · Feel the weight
Kai imports every page and all of lodash at the top of App.jsx. Open the login page, then weigh what it downloaded.
2 · Shake it and split it
Pick the change that really takes weight off the login page. Moving code around without changing what ships does not count.
3 · The network audit
Set a budget for the login page, then visit /login, /reports and /notes with your build. Every page must download only what it needs.
New seal earned
The Asura shrank to a snack
Acharya’s Rule #20Ship what the page needs now. Load the rest when it’s asked for.
A bundle visualizer draws every module by size. Start with the biggest box, never a guess.
Tree shaking drops unused exports only for ES modules in a production build. Use lodash-es, not CommonJS lodash.
lazy(() => import('./Reports')) turns a page into its own chunk that downloads when it opens.