Minify JavaScript

Renaming, removing, and what must never be touched

Three things happen, in increasing order of how much they save and how much they cost you. Whitespace and comments go, which is free. Dead code goes — a branch that can never run, a variable assigned and never read. And local names are shortened, so a carefully named calculateMonthlyTotal becomes a single letter. That last one is where most of the saving lives and it is also what makes the output unreadable, which is fine for shipping and useless for debugging.

What cannot be renamed is anything the outside world refers to by name, and getting this wrong is how minifiers break code. Exported functions, object properties accessed as strings, anything reached through window, and names used in eval all have to survive intact, because something elsewhere is looking them up by the name you wrote. Properties in particular are left alone by default: renaming user.emailAddress would break the moment that object is serialised to JSON or read by code that was minified separately.

Keep a source map or the original. Once names are gone, a stack trace from a real user reads as an error in function t at character 48,213, which tells you nothing at all. A source map restores the original names and line numbers in the debugger and in error reporting, and generating one costs nothing because it ships as a separate file that only loads when somebody opens the developer tools.

Licence comments are kept by default, and that is a legal position rather than a preference. A great deal of open-source code is permissively licensed on the single condition that its copyright notice travels with it — MIT and BSD both say so explicitly. Stripping those comments from a bundle containing third-party code puts you in breach of the licence that let you use it. They are a few hundred bytes.

When you want something else

This belongs in a build rather than in a browser tab, and modern bundlers do it as a matter of course. esbuild --minify and Rollup or Vite minify on build, generate source maps automatically, and — far more importantly — perform tree shaking, dropping the exports of your dependencies that you never import. On a real application that saves vastly more than minifying a finished file ever can.

Before optimising, measure. A bundle analyser will usually reveal that one large dependency accounts for most of the file — a date library, an icon set, a charting package pulled in whole for one chart. Replacing or lazily loading that beats any amount of minification, and code splitting so that a page only loads what it needs beats both.