JavaScript Minify Tool

Enable live compression as you type

Input JavaScript

/* This a top-level function with some arguments that should be mangled */
const test = (argumentOne, argumentTwo) => {

  /* This is an unused function that compression should remove as dead code */
  const hello = () => console.log('hello world');

  /* Use the input arguments, which should match the new mangled names */
  console.log(argumentOne, argumentTwo);
};

Output JavaScript

Output JavaScript

const test=(o,s)=>{console.log(o,s)};

Code Size

Before: 368 B

After: 37 B

Saving: 89.95% (331 B)

Why minify your JavaScript?

Minifying, or minification, is where you remove unnecessary characters from your code, whether they might be whitespace (such as indentation), code that isn't ever used, comments in your code or long names for variables that can be replaced with something shorter.

Minification of your code results in it taking up less space, making it faster to send from a server to a client, as well as using less bandwidth in doing so. This improves the user experience on your site as it can load faster.

You should only minify the code that you are distributing though, not your source version that you are writing, as minified code is harder to read and understand, making debugging more complicated. Providing a source map helps with this, as it maps the minified code back to the original source code, allowing production errors to be mapped to the correct bit of code in the source version.

Using Terser in a production pipeline

There are many different options available for minifying your code in a production workflow, such as uglify-js or minify, but Terser seems to be the most popular tool currently available, as it is able to handle both ES5 & ES6 syntax out of the box.

Terser is available on NPM, and can be installed in your project with npm install terser. Optionally, you can install it globally on your machine by adding the -g flag to the command, allowing the CLI to be used anywhere and the module to be included in any project.

Once installed, there are two main ways to interact with Terser. Either, you can use the command line interface (CLI) via your terminal/console, or you can use the Terser JavaScript API which allows for more fine control over how your code is minified.

To minify a file with Terser via the CLI, you can run terser my_code.js --output my_file.min.js. Compression and mangling can be enabled with the --compress and --mangle flags respectively. Sourcemap generation can also be enabled with the --source-map flag. An example of how to minify your code using the Terser JavaScript API is included below.

For more information on using the Terser CLI & API, please see their documentation on GitHub.

Example usage for Terser with your current config

// Import Terser so we can use it
const { minify } = require('terser');

// Import fs so we can read/write files
const fs = require('fs');

// Define the config for how Terser should minify the code
// This is set to how you currently have this web tool configured
const config = {
  compress: {
    dead_code: true,
    drop_console: false,
    drop_debugger: true,
    keep_classnames: false,
    keep_fargs: true,
    keep_fnames: false,
    keep_infinity: false
  },
  mangle: {
    eval: false,
    keep_classnames: false,
    keep_fnames: false,
    toplevel: false,
    safari10: false
  },
  module: false,
  sourceMap: false,
  output: {
    comments: 'some'
  }
};

// Load in your code to minify
const code = fs.readFileSync('my_code.js', 'utf8');

// Minify the code with Terser
const minified = await minify(code, config);

// Save the code!
fs.writeFileSync('my_code.min.js', minified.code);