Back to results for “Deployment”
React › Build Tools & Bundlers (Vite, Webpack & CRA)

What is code minification and why does a build tool perform it automatically?

Intermediate

Answer

Minification removes unnecessary spaces, comments, and shortens variable names in the final JavaScript file, without changing what the code actually does. This makes the file much smaller so it downloads faster for people visiting the website, especially on slower internet connections.
// Before minification
function addNumbers(firstNumber, secondNumber) {
  return firstNumber + secondNumber;
}

// After minification
function a(b,c){return b+c}
Real-world example An online news site reduces its main JavaScript file from two megabytes to under three hundred kilobytes after enabling minification, noticeably speeding up how fast the site loads for readers on mobile data.

Common follow-ups: Does minifying code make it harder to debug in production, and how do developers handle that?;What other optimizations does a build tool usually apply besides minification?