A tiny bundler: graph, order, tree shaking
Real bundlers parse code properly instead of reading lines, rename variables when two modules use the same name ("scope hoisting"), and only drop code they can prove has no side effects. The idea is the same: follow imports, put dependencies first, leave out what nobody uses.
A bundler follows your imports from one entry file and combines the modules into a few optimised files, transpiling new syntax for older browsers, removing unused code and minifying; a dev server such as Vite serves your code instantly while you work and updates the page as you save.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write minifyNumbers(code) that removes every space except those inside double-quoted strings. Test it on const total = 1 + 2; const s = "a b";.
Write the package.json scripts and the vite.config.js for a site deployed to https://example.com/blog/, with source maps turned on.
Explain it without notes
Why do we bundle JavaScript for production if browsers support ES modules?
What is the difference between transpiling and polyfilling?
How does Vite's dev server differ from its production build?
What is tree shaking, and why does it need ES modules?
Preview
Console
Nothing logged yet.Expected console output
Order: [ './format.js', './prices.js', './main.js' ]
Tree-shaken away: [ 'formatDate', 'debugPrices' ]
Running the bundle:
Rs 118.00