Minify and hash: why file names change
Edit the code in the box: comments and spaces don't change the minified output, so the name stays the same; change real code and the name changes. Real minifiers parse the code instead of using regular expressions, and Vite uses a stronger hash, but the result is the same idea.
A production build turns your many source files into a few small, fast files in dist/: it transpiles JSX and TypeScript, bundles modules together, removes code nothing uses (tree shaking), minifies what's left, names files by a hash of their content and can write source maps that point back to your original code.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
In the tree-shaking example, dates.js gains an export logImport with { size: 20, uses: [] } that the bundler must keep because it has a side effect. Add a sideEffect: true flag and change shake() so such exports are always kept.
Write a vite.config.js that writes hidden source maps and raises the chunk size warning limit to 800 kB.
Explain it without notes
What happens, step by step, when you run npm run build in a Vite React app?
What is tree shaking, why do ES modules make it possible, and what stops it from working?
Why do built files have hashes in their names?
What are source maps and what are the three Vite build.sourcemap settings for?
How is npm run dev different from a production build, and why does it matter?
Preview
Console
Nothing logged yet.Expected console output
export function formatPrice(e){const t=e/100;return "Rs "+t.toFixed(2);}
bytes: 177 -> 72
name: money-06a23g6.js
same code again: money-06a23g6.js
one character changed: money-1r9bnq5.js