terser

What is terser?

The terser npm package is a tool for minifying and compressing JavaScript files. It removes unnecessary whitespace, shortens variable names, and performs various optimizations to reduce the size of your JavaScript files, which can lead to faster load times in web browsers.

What are terser's main functionalities?

Code Minification

Minifies JavaScript code by removing unnecessary characters without changing its functionality.

const Terser = require('terser');

const code = 'function add(x, y) { return x + y; }';
Terser.minify(code).then(result => {
  console.log(result.code); // Output could be 'function add(n,d){return n+d}'
});

Compressing Code

Compresses code by applying various transformations, such as removing unreachable code and simplifying if-statements.

const Terser = require('terser');

const code = 'if (true) { console.log('Hello World!'); }';
const options = { compress: true };
Terser.minify(code, options).then(result => {
  console.log(result.code); // Output could be 'console.log('Hello World!');'
});

Mangling Variable Names

Shortens variable and function names to reduce file size and potentially obfuscate code.

const Terser = require('terser');

const code = 'const longVariableName = 5; console.log(longVariableName);';
const options = { mangle: true };
Terser.minify(code, options).then(result => {
  console.log(result.code); // Output could be something like 'const a=5;console.log(a);'
});

Source Map Support

Generates source maps to help debug minified JavaScript by mapping the minified code back to the original source code.

const Terser = require('terser');

const code = 'function example() { console.log('Hello World!'); }';
const options = {
  sourceMap: {
    filename: 'out.js',
    url: 'out.js.map'
  }
};
Terser.minify(code, options).then(result => {
  console.log(result.code); // Minified code
  console.log(result.map);  // Source map
});

Other packages similar to terser

uglify-js

uglify-js is another JavaScript minifier that predates terser. Terser was originally forked from uglify-js v3. Uglify-js has similar minification and compression features but does not support the ES6+ syntax, while terser does.

babel-minify

babel-minify is a minifier based on the Babel toolchain. It leverages Babel's understanding of ES6+ syntax to minify code. It is similar to terser but is integrated into the Babel ecosystem, which might be beneficial for projects already using Babel.

google-closure-compiler

The Google Closure Compiler is a tool for making JavaScript download and run faster. It compiles from JavaScript to better JavaScript. It is more than just a minifier; it also checks code quality, and it can perform more aggressive optimizations than terser, but it has a steeper learning curve.

esbuild

esbuild is an extremely fast JavaScript bundler and minifier. It performs similar tasks to terser but is focused on speed and also includes features like bundling and transpilation. It's a more comprehensive build tool compared to terser, which is primarily focused on minification.