UglifyJS

By default, using a quoted property name (e.g., o["foo"]) reserves that name so it isn't mangled even if used unquoted (o.foo).

• Use --mangle-props keep_quoted to ensure these names are preserved.
• If the output will be processed by UglifyJS again, use -O keep_quoted_props to maintain consistency.

uglifyjs stuff.js --mangle-props keep_quoted -c -m

If you are compressing code that was already output by a compiler (like CoffeeScript), you can map back to the original source instead of the intermediate JS. Pass the existing source map using the content option within --source-map.

• Use --source-map "content='/path/to/input/source.map'" for a file path.
• Use --source-map "content=inline" if the source map is embedded inline with the source files.

uglifyjs file.js --source-map "content='/path/to/input/source.map'"

If you want to speed up builds significantly, you can enable 'Fast Minify Mode' by disabling the compress step. This focuses only on whitespace removal and symbol mangling, which accounts for ~95% of size reduction in most cases. This can be 3 to 5 times faster than a full build.

CLI: uglifyjs file.js -m (only mangling)

API: UglifyJS.minify(code, { compress: false, mangle: true });

You can install UglifyJS via NPM either as a global command-line application or as a local dependency for programmatic use in your projects.

Prerequisites

• Ensure you have the latest version of node.js installed.

Installation Commands

• Global (CLI usage):

  npm install uglify-js -g

• Local (Programmatic use):

  npm install uglify-js

The mangle configuration object controls the renaming of identifiers to reduce file size.

Common settings:

• reserved: An array of identifiers (e.g., ['foo', 'bar']) that must not be renamed.
• toplevel: When true, allows mangling of names declared in the top-level scope.
• eval: When true, mangles names visible in scopes where eval or with are used.

Use the mangle object within the options passed to UglifyJS.minify().

// Basic mangling with reserved names
UglifyJS.minify(code, { mangle: { reserved: ['firstLongName'] } }).code;

// Mangling top-level names
UglifyJS.minify(code, { mangle: { toplevel: true } }).code;

The unsafe option in the compress configuration enables transformations that might break code logic in specific, contrived cases but generally reduce minified size for most standard code.

Transformations include:

• Converting new Array(1, 2, 3) or Array(1, 2, 3) to [1, 2, 3].
• Converting new Object() to {}.
• Converting String(exp) or exp.toString() to "" + exp.
• Discarding the new keyword for Object, RegExp, Function, Error, and Array constructors.

The --mangle-props functionality (configured via mangle.properties) allows for the renaming of object property names.

Available options:

• regex: A RegExp literal to target only specific property names for mangling.
• reserved: An array of property names that should not be mangled.
• keep_quoted: If true, only unquoted property names are mangled.
• debug: If set to an empty string "" or a non-empty string, it enables debugging by keeping the original name as a suffix.
• builtins / domprops / globals: Boolean flags to allow/disallow mangling of built-in APIs, DOM properties, or global object properties. Use with caution.

The UglifyJS CLI is used to minify JavaScript files. By default, it reads files from the provided paths and outputs the minified code to STDOUT. You can specify an output file using the -o or --output flag.

To minify a file and save it to a new file:

uglifyjs input.js -o output.min.js

To minify multiple files (the CLI supports simple globbing with * and ?):

uglifyjs src/*.js -o bundle.min.js

Many compress transformations (simplification, rearrangement, inlining, removal) can make source map debugging difficult because the optimized code may no longer exist in a way that maps back to the original.

Best Practice: For the highest fidelity in source map debugging, disable the compress option and use only mangle.

You can use UglifyJS.minify() to work directly with Uglify's internal Abstract Syntax Tree (AST) instead of strings. This is useful for multi-stage transformations.

Parse only (produce AST):

var result = UglifyJS.minify(code, {
    parse: {},
    compress: false,
    mangle: false,
    output: {
        ast: true,
        code: false
    }
});
// result.ast contains the native Uglify AST

Accept AST input (produce both AST and code):

var result = UglifyJS.minify(ast, {
    compress: {},
    mangle: {},
    output: {
        ast: true,
        code: true
    }
});
// result.ast contains the native Uglify AST
// result.code contains the minified code string