Transpilation changes the syntax, minification makes the code smaller without changing what it does, and compression encodes the bytes sent over the network.
Transpilation
Minification
Compression
What changes
The syntax, such as TypeScript or newer JavaScript turned into JavaScript older browsers run
Whitespace and comments removed, long names shortened, dead code dropped
The bytes, encoded with gzip or Brotli
Typical tool
Babel, TypeScript, Oxc
Terser, Oxc minifier
The web server or a content delivery network (CDN)
When it runs
Build time, file by file
Build time, after bundling
When the file is served, and the browser decodes it
Transpilation is about compatibility, such as erasing TypeScript types or rewriting modern syntax for older browsers. Minification is about size, and most of its savings come from removing whitespace and shortening names, called mangling. Compression comes last. The server sends the minified file gzip or Brotli encoded, and the browser decodes it to the same text. Some builds also write pre-compressed .gz or .br files so the server does not compress on every request.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
