Practise vocabulary for Webpack, Vite, Rollup, and esbuild: bundles, chunks, tree shaking, and source maps.
0 / 6 completed
1 / 6
Tree shaking in a JavaScript bundler means:
Tree shaking (a form of dead code elimination) relies on ES module static analysis. If you import { format } from 'date-fns', only the format function is bundled — not the entire date-fns library. Requires ES modules (not CommonJS).
2 / 6
Code splitting in Webpack or Vite refers to:
Code splitting: instead of one large bundle, the app loads a small initial bundle and lazy-loads additional chunks when routes or features are accessed. Example: the admin dashboard chunk is only downloaded when the user navigates to /admin.
3 / 6
Vite's key advantage over Webpack in development mode is:
Vite's dev server exploits native browser ES modules: it serves untransformed modules and only transforms what the browser requests. No full bundle rebuild needed — HMR is fast because only the changed module is re-executed, not the whole app.
4 / 6
A source map file in a JavaScript build is used to:
Source maps (.map files) allow debugging minified production code: the browser loads both the minified bundle and its source map, then shows original TypeScript/JSX in DevTools. External source maps (not inline) can be deployed separately for security — they reveal source code to anyone who accesses them.
5 / 6
The phrase 'the production build was 2.3MB before tree shaking; after enabling tree shaking it dropped to 890KB' means:
A 61% size reduction from tree shaking indicates significant unused code in dependencies. This is common with large utility libraries (lodash, moment.js) — importing a single function but bundling the entire library. Tree shaking plus selective imports (import { format } not import everything) prevents this.
6 / 6
The difference between Rollup and Webpack is best described as:
Rollup produces clean, flat ES module output — preferred for library authors (Vue, React, and many npm packages are built with Rollup). Webpack has richer plugin ecosystems for complex app bundling (CSS modules, asset handling, dev server). Vite uses Rollup for production builds.