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.
What does the "" exercise cover?Is this exercise free to use?
Yes. Every exercise on CoderSlingo, including this one, is free to use with no account, sign-up, or paywall.
How many questions are in ""?
This exercise has 6 questions. Each one gives instant feedback with an explanation, so you can see exactly why an answer is right or wrong.
Do I need to create an account to save my progress?
No account is required. The progress bar and score are tracked in your browser for the current session -- the exercise is designed to be a quick, repeatable drill rather than something you resume later.
What happens if I get an answer wrong?
You'll see the correct answer highlighted immediately, along with a short explanation of why it's correct. Wrong answers aren't penalized beyond your score, and you can keep going through every question.
How is this exercise different from reading an article?
Articles explain vocabulary and concepts through prose, while exercises like this one are interactive drills -- multiple-choice questions -- that test and reinforce your recall of specific terms and phrasing.
Can I retry this exercise?
Yes -- use the "Try again" button on the results screen to reset your score and go through all the questions again from the start.
Where can I find more Developer Toolchain exercises?
Browse the full Developer Toolchain hub for related drills, or check the site-wide exercises index for other IT English topics.
Is this exercise suitable for beginners?
This exercise assumes basic familiarity with IT terminology. If a term feels unfamiliar, check the site Glossary for a plain-English definition before attempting the questions.
How often is new content like this published?
New exercises are added regularly across all categories, alongside new vocabulary sets and articles. Check back on the exercises hub to see what's new.