Crux Read real build configs and a package.json field, predict the bundler behaviour, and pick the highest-leverage fix for tree-shaking, mode, source maps, and env inlining.
Your altitude — climbing toward senior
ZeroJuniorMiddleSenior
You are at senior altitude — in orbit
◷ 14 min
Build problems are diagnosed in the config and the package manifest, not in the running app. Read each snippet, predict what the bundler does with it, and choose the fix a senior would make first.
Goal
Practise the loop you run on every build regression: read the config, predict where bytes leak or where dev and prod diverge, and reach for the precise field — sideEffects, mode, sourcemap, manualChunks, env — that fixes the root cause.
The package ships a dist/styles.css that components import for their styling, e.g. import "./button.css" at the top of Button.js.
Quiz
Completed
A consumer reports that some component styles vanish in their production build. What does this sideEffects value cause, and what is the fix?
Heads-up The flag applies to every module, including the ones that import CSS for its side effect. Claiming false here lets the bundler eliminate the CSS-importing module.
Heads-up true disables tree-shaking for the whole package and ships dead JS. The precise fix is to list only the genuinely impure files, like '*.css', and keep the rest shakeable.
Heads-up A module whose only job is importing CSS is exactly what an over-broad sideEffects: false lets the bundler delete; the field is the root cause.
The team runs this exact config in CI to produce the artifact they deploy to production.
Quiz
Completed
The deployed bundle is ~3× larger than expected and React logs development warnings in prod. What is wrong, and what is the highest-leverage fix?
Heads-up Tree-shaking is not the toggle here; mode is. development mode skips minification and leaves NODE_ENV=development, so dev-only branches survive and the bundle stays large.
Heads-up React strips its dev warnings when NODE_ENV is production. They appear precisely because development mode left NODE_ENV at development.
Heads-up devtool controls source maps, not the dev/prod code paths. The fix is the mode field, which drives minification and NODE_ENV.
Production throws an error and the stack trace reads index-a1b2c3.js:1:88431. The error tracker shows the same unreadable frame.
Quiz
Completed
You need readable prod stack traces in your error tracker without exposing source to the public. What is the right setting?
Heads-up Without a source map, the minified single-line frame cannot be mapped back to Button.tsx:42; every prod error stays unreadable. Generate the map, just do not expose it publicly.
Heads-up true emits the sourceMappingURL into the public bundle, exposing your source to anyone with devtools. 'hidden' gives the tracker the map without publishing it.
Heads-up Source maps are debugging metadata only; they never alter how the code runs. They affect whether a trace is readable, nothing more.
A reviewer also notices a client component reads process.env.API_SECRET to call an internal API.
Quiz
Completed
Which statement about this config is correct?
Heads-up Vite statically inlines referenced env values into the client bundle at build time. A secret read in client code is baked into shipped JS — a real leak.
Heads-up Sharing vendor with app code busts the vendor cache on every app deploy. Isolating react/react-dom into a stable vendor chunk is the correct move.
Heads-up Build-time inlining copies the env value into the output bundle regardless of where it originated. Only server-side code may read secrets.
Recap
Every build regression is read in the config: sideEffects: false must list genuinely impure files (like CSS) or the bundler drops them; production must build with production mode so minification and NODE_ENV-gated dead-code-elimination run; source maps belong in ‘hidden’ mode so the error tracker gets readability without public exposure; vendor deserves its own manualChunks chunk for cache stability; and any env value referenced in client code is inlined at build time, so secrets never touch the client. Read the field, predict the output, fix the root cause.