Minifying and content hashes
Changing one number gives a completely different file name, so a browser that cached version 1 for a year still fetches version 2 at once. Unchanged files keep their names and stay cached. Real builds use stronger hashes (such as SHA-256) and real minifiers also shorten price and rate to one letter.
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
version 1: 99 -> 70 chars, file index-45fc5ef3.js
version 2: 99 -> 70 chars, file index-e042c929.js