Build Tools and Bundlers

Quiz: What Gets Bundled?

intermediate12 min read

Put Your Bundler Knowledge to the Test

You've learned how webpack builds module graphs, how Vite skips bundling in dev, how Rollup tree-shakes for libraries, and how esbuild gets its speed from Go. Now let's see if the mental models actually stuck.

These questions are designed to test real understanding — not trivia. Each one reflects a scenario you'd actually encounter in production. Take your time, think through each option, and pay attention to the explanations even for questions you get right.

Question 1: Tree Shaking Fundamentals

Quiz
You import { formatDate } from a utility library that exports 50 functions. The library publishes ESM with sideEffects: false. How much of the library ends up in your bundle?

Question 2: Vite Dev vs Production

Quiz
You have a component that works perfectly in Vite dev mode but throws an error in production builds. What's the most likely category of cause?

Question 3: Webpack Loaders

Quiz
Your webpack config has: use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']. A .scss file is processed. What's the execution order?

Question 4: esbuild vs Babel Speed

Quiz
esbuild is 10-100x faster than Babel for TypeScript compilation. Why can't Babel achieve the same speed by optimizing its JavaScript code?

Question 5: Code Splitting Tradeoffs

Quiz
You eagerly split every component in your app into its own chunk (200+ chunks averaging 5KB each). What happens to performance?

Question 6: Module Federation Singleton

Quiz
Two federated apps both share React with singleton: true. App A loads React 19.0.0 first. App B has React 18.3.0 bundled. Both apps render on the same page. What happens?

Question 7: Source Map Security

Quiz
Your production app uses devtool: 'source-map' in webpack. You deploy to a public CDN. A security researcher discovers your source maps. What information have you exposed?

Question 8: Barrel File Impact

Quiz
Your utils/index.ts barrel file re-exports 30 utilities from 30 separate files. One of those files imports a 200KB charting library at the top level. You import { formatDate } from '@/utils' — a 1KB function from a different file. What likely ends up in your bundle?

Question 9: Bundler Architecture

Quiz
Turbopack uses function-level incremental computation. You change a comment in Button.tsx but the component's behavior and exports are identical. What does Turbopack recompile?

Question 10: Production Build Strategy

Quiz
You're configuring a production build for a Next.js app. Which combination gives you the best build output?

How Did You Do?

These questions covered the full spectrum of build tooling knowledge:

  • Questions 1, 8: Tree shaking and barrel file behavior
  • Questions 2, 10: Build tool selection and configuration
  • Questions 3, 4: Bundler internals (loaders, native speed)
  • Questions 5, 9: Code splitting and incremental computation
  • Questions 6, 7: Module federation and source map security

If you missed any, go back to the relevant topic — the explanations there go much deeper than what a quiz can cover.

Related Topics
11/11