Four ways to minify your code

Since web apps are sent over the internet, it’s good to keep them small so that the app loads quickly. For this reason, we have minifiers to remove spaces, remove newlines and shorten variable names to a single character. Obfuscators are closely related - their goal is to make code harder to understand.

Unfortunately, the TypeScript compiler not only cannot produce minified output, it proactively wastes space. Even if your TypeScript code uses two spaces for indentation and has compact expressions like x+1, the TypeScript compiler produces output with four spaces and adds spaces between things like x + 1. As of 2018 there is no compiler option to avoid this (at least you can remove comments with "removeComments":true, but if you are producing a d.ts file this will also remove comments from the d.ts file unless you perform a separate comment-removing build that does not produce a d.ts file, e.g. tsc --declaration && tsc --removeComments)

1. Webpack / Parcel

If you’re using webpack to build your code, webpack -p reportedly minifies the application using “UglifyJSPlugin”.

Parcel’s production mode, parcel build, also uses a minifier.

Otherwise you have these options:

2. JSMin

This is a tiny (15KB), simple and old minifier, appropriate for simple programs/modules. It just removes spaces; it does not shorten variable names so it does not provide the smallest possible size.

Usage:

Install in a terminal with npm install --save-dev jsmin
In package.json in the "scripts" section, add a minify script that uses jsmin (replace name with the name of your JavaScript file, not your TypeScript file; multiple filenames are allowed):

    "minify": "jsmin -o name.min.js name.js"

JSMin cannot minify more than one file at a time. To minify two files you can write jsmin -o name1.min.js name1.js && jsmin -o name2.min.js name2.js.

Add minify to your build script. For example if your build script looked like this before…

    "build": "tsc --declaration",

then change it to

    "build": "tsc --declaration && npm run minify",

Here’s the documentation for jsmin.

3. uglify-js / uglify-es

Uglify-js is 100 times larger than jsmin (1.5MB vs 15KB) but has many more features, is more popular, and is still small compared to WebPack or the TypeScript compiler. Uglify can also produce a source map to your original TypeScript or ES6 code (source maps allow you to debug the minified code as if it was the original. Major web browsers will run the minified code but show you the original code when you use their debugger).

Confusingly there are two packages, uglify-js and uglify-es. I’m waiting to hear the difference.

Usage:

Install in a terminal with npm install --save-dev uglify-js

Note: npm tools installed with --save-dev are located in ./node_modules/bin and if you want to run it directly from the command-line you need to write ./node_modules/.bin/uglifyjs instead of just uglifyjs. If you install globally with npm install --global uglifyjs, you don’t have to do this. The advantage of using --save-dev is that the dependency is listed in package.json so that when your code is placed on a different machine, running npm install installs all dependencies (except global ones). It is possible to install two copies - global and local - like this: npm install uglify-js --global --save-dev

In package.json in the "scripts" section, add a minify script that uses uglifyjs (replace name with the name of your JavaScript file, not your TypeScript file; multiple filenames are allowed):

    "minify": "uglifyjs --compress --mangle --output name.min.js -- name.js"

Uglify shortens variable names if you use the --mangle option, and --compress uses different tricks to shorten code, such as replacing undefined with void 0. With neither option, Uglify simply removes spaces like JSMin. --mangle also obfuscates the code somewhat; for example, if the input is function fruit(apple, banana, x, y) {}, it produces function fruit(n,f,o,t){} instead of using more readable names like function fruit(a,b,x,y){}. The developers apparently intend to keep it that way. Uglify also renames inner functions, which can be avoided with the --keep-fnames option.

UglifyJS can minify multiple files by concatenating them, but it can only produce a single output file. As with JSMin, you can uglify two or more files with two or more separate commands, e.g.

uglifyjs -mc -o name1.min.js name1.js && uglifyjs -mc -o name2.min.js name2.js

-mc is short for --mangle --compress. Any Windows users trying this on the command prompt should be aware that && doesn’t work in Powershell, though it does work in the old command prompt, cmd. Yet, ./node_modules/.bin/uglifyjs works in Powershell but not cmd (cmd requires .\node_modules\.bin\uglifyjs).

Add minify to your build script. For example if your build script looked like this before…

    "build": "tsc --declaration",

then change it to

    "build": "tsc --declaration && npm run minify",

4. Google Closure Compiler

More than just a minifier, the Closure Compiler can also analyze code to remove unused parts (known as “dead code”). I haven’t used it, so please see Google’s instructions.