terser

[![NPM Version][npm-image]][npm-url] [![NPM Downloads][downloads-image]][downloads-url] [![CI pipeline][ci-image]][ci-url] [![Opencollective financial contributors][opencollective-contributors]][opencollective-url] A JavaScript mangler/compressor toolkit for ES6+. *note*: You can support this project on patreon: [link] **The Terser Patreon is shutting down in favor of opencollective**. Check out [PATRONS.md](https://github.com/terser/terser/blob/master/PATRONS.md) for our first-tier patrons. Terser recommends you use RollupJS to bundle your modules, as that produces smaller code overall. *Beautification* has been undocumented and is *being removed* from terser, we recommend you use [prettier](https://npmjs.com/package/prettier). Find the changelog in [CHANGELOG.md](https://github.com/terser/terser/blob/master/CHANGELOG.md) [npm-image]: https://img.shields.io/npm/v/terser.svg [npm-url]: https://npmjs.org/package/terser [downloads-image]: https://img.shields.io/npm/dm/terser.svg [downloads-url]: https://npmjs.org/package/terser [ci-image]: https://github.com/terser/terser/actions/workflows/ci.yml/badge.svg [ci-url]: https://github.com/terser/terser/actions/workflows/ci.yml [opencollective-contributors]: https://opencollective.com/terser/tiers/badge.svg [opencollective-url]: https://opencollective.com/terser Why choose terser? ------------------ `uglify-es` is [no longer maintained](https://github.com/mishoo/UglifyJS2/issues/3156#issuecomment-392943058) and `uglify-js` does not support ES6+. **`terser`** is a fork of `uglify-es` that mostly retains API and CLI compatibility with `uglify-es` and `uglify-js@3`. Install ------- First make sure you have installed the latest version of [node.js](http://nodejs.org/) (You may need to restart your computer after this step). From NPM for use as a command line app: npm install terser -g From NPM for programmatic use: npm install terser # Command line usage ``` terser [input files] [options] ``` Terser can take multiple input files. It's recommended that you pass the input files first, then pass the options. Terser will parse input files in sequence and apply any compression options. The files are parsed in the same global scope, that is, a reference from a file to some variable/function declared in another file will be matched properly. Command line arguments that take options (like --parse, --compress, --mangle and --format) can take in a comma-separated list of default option overrides. For instance: terser input.js --compress ecma=2015,computed_props=false If no input file is specified, Terser will read from STDIN. If you wish to pass your options before the input files, separate the two with a double dash to prevent input files being used as option arguments: terser --compress --mangle -- input.js ### Command line options ``` … ``` Specify `--output` (`-o`) to declare the output file. Otherwise the output goes to STDOUT. ## CLI source map options Terser can generate a source map file, which is highly useful for debugging your compressed JavaScript. To get a source map, pass `--source-map --output output.js` (source map will be written out to `output.js.map`). Additional options: - `--source-map "filename=''"` to specify the name of the source map. - `--source-map "root=''"` to pass the URL where the original files can be found. - `--source-map "url=''"` to specify the URL where the source map can be found. Otherwise Terser assumes HTTP `X-SourceMap` is being used and will omit the `//# sourceMappingURL=` directive. For example: terser js/file1.js js/file2.js \ -o foo.min.js -c -m \ --source-map "root='http://foo.com/src',url='foo.min.js.map'" The above will compress and mangle `file1.js` and `file2.js`, will drop the output in `foo.min.js` and the source map in `foo.min.js.map`. The source mapping will refer to `http://foo.com/src/js/file1.js` and `http://foo.com/src/js/file2.js` (in fact it will list `http://foo.com/src` as the source map root, and the original files as `js/file1.js` and `js/file2.js`). ### Composed source map When you're compressing JS code that was output by a compiler such as CoffeeScript, mapping to the JS code won't be too helpful. Instead, you'd like to map back to the original code (i.e. CoffeeScript). Terser has an option to take an input source map. Assuming you have a mapping from CoffeeScript → compiled JS, Terser can generate a map from CoffeeScript → compressed JS by mapping every token in the compiled JS to its original location. To use this feature pass `--source-map "content='/path/to/input/source.map'"` or `--source-map "content=inline"` if the source map is included inline with the sources. ## CLI compress options You need to pass `--compress` (`-c`) to enable the compressor. Optionally you can pass a comma-separated list of [compress options](#compress-options). Options are in the form `foo=bar`, or just `foo` (the latter implies a boolean option that you want to set `true`; it's effectively a shortcut for `foo=true`). Example: terser file.js -c toplevel,sequences=false ## CLI mangle options To enable the mangler you need to pass `--mangle` (`-m`). The following (comma-separated) options are supported: - `toplevel` (default `false`) -- mangle names declared in the top level scope. - `eval` (default `false`) -- mangle names visible in scopes where `eval` or `with` are used. When mangling is enabled but you want to prevent certain names from being mangled, you can declare those names with `--mangle reserved` — pass a comma-separated list of names. For example: terser ... -m reserved=['$','require','exports'] to prevent the `require`, `exports` and `$` names from being changed. ### CLI mangling property names (`--mangle-props`) **Note:** THIS **WILL** BREAK YOUR CODE. A good rule of thumb is not to use this unless you know exactly what you're doing and how this works and read this section until the end. Mangling property names is a separate step, different from variable name mangling. Pass `--mangle-props` to enable it. The least dangerous way to use this is to use the `regex` option like so: ``` terser example.js -c -m --mangle-props regex=/_$/ ``` This will mangle all properties that end with an underscore. So you can use it to mangle internal methods. By default, it will mangle all properties in the input code with the exception of built in DOM properties and properties in core JavaScript classes, which is what will break your code if you don't: 1. Control all the code you're mangling 2. Avoid using a module bundler, as they usually will call Terser on each file individually, making it impossible to pass mangled objects between modules. 3. Avoid calling functions like `defineProperty` or `hasOwnProperty`, because they refer to object properties using strings and will break your code if you don't know what you are doing. An example: ```javascript // example.js var x = { baz_: 0, foo_: 1, calc: function() { return this.foo_ + this.baz_; } }; x.bar_ = 2; x["baz_"] = 3; console.log(x.calc()); ``` Mangle all properties (except for JavaScript `builtins`) (**very** unsafe): ```bash $ terser example.js -c passes=2 -m --mangle-props ``` ```javascript var x={o:3,t:1,i:function(){return this.t+this.o},s:2};console.log(x.i()); ``` Mangle all properties except for `reserved` properties (still very unsafe): ```bash $ terser example.js -c passes=2 -m --mangle-props reserved=[foo_,bar_] ``` ```javascript var x={o:3,foo_:1,t:function(){return this.foo_+this.o},bar_:2};console.log(x.t()); ``` Mangle all properties matching a `regex` (not as unsafe but still unsafe): ```bash $ terser example.js -c passes=2 -m --mangle-props regex=/_$/ ``` ```javascript var x={o:3,t:1,calc:function(){return this.t+this.o},i:2};console.log(x.calc()); ``` Combining mangle properties options: ```bash $ terser example.js -c passes=2 -m --mangle-props regex=/_$/,reserved=[bar_] ``` ```javascript var x={o:3,t:1,calc:function(){return this.t+this.o},bar_:2};console.log(x.calc()); ``` In order for this to be of any use, we avoid mangling standard JS names and DOM API properties by default (`--mangle-props builtins` to override). A regular expression can be used to define which property names should be mangled. For example, `--mangle-props regex=/^_/` will only mangle property names that start with an underscore. When you compress multiple files using this option, in order for them to work together in the end we need to ensure somehow that one property gets mangled to the same name in all of them. For this, pass `--name-cache filename.json` and Terser will maintain these mappings in a file which can then be reused. It should be initially empty. Example: ```bash $ rm -f /tmp/cache.json # start fresh $ terser file1.js file2.js --mangle-props --name-cache /tmp/cache.json -o part1.js $ terser file3.js file4.js --mangle-props --name-cache /tmp/cache.json -o part2.js ``` Now, `part1.js` and `part2.js` will be consistent with each other in terms of mangled property names. Using the name cache is not necessary if you compress all your files in a single call to Terser. ### Mangling unquoted names (`--mangle-props keep_quoted`) Using quoted property name (`o["foo"]`) reserves the property name (`foo`) so that it is not mangled throughout the entire script even when used in an unquoted style (`o.foo`). Example: ```javascript // stuff.js var o = { "foo": 1, bar: 3 }; o.foo += o.bar; console.log(o.foo); ``` ```bash $ terser stuff.js --mangle-props keep_quoted -c -m ``` ```javascript var o={foo:1,o:3};o.foo+=o.o,console.log(o.foo); ``` ### Debugging property name mangling You can also pass `--mangle-props debug` in order to mangle property names without completely obscuring them. For example the property `o.foo` would mangle to `o._$foo$_` with this option. This allows property mangling of a large codebase while still being able to debug the code and identify where mangling is breaking things. ```bash $ terser stuff.js --mangle-props debug -c -m ``` ```javascript var o={_$foo$_:1,_$bar$_:3};o._$foo$_+=o._$bar$_,console.log(o._$foo$_); ``` You can also pass a custom suffix using `--mangle-props debug=XYZ`. This would then mangle `o.foo` to `o._$foo$XYZ_`. You can change this each time you compile a script to identify how a property got mangled. One technique is to pass a random number on every compile to simulate mangling changing with different inputs (e.g. as you update the input script with new properties), and to help identify mistakes like writing mangled keys to storage. # API Reference Assuming installation via NPM, you can load Terser in your application like this: ```javascript const { minify } = require("terser"); ``` Or, ```javascript import { minify } from "terser"; ``` Browser loading is also supported. It exposes a global variable `Terser` containing a `.minify` property: ```html ``` There is an async high level function, **`async minify(code, options)`**, which will perform all minification [phases](#minify-options) in a configurable manner. By default `minify()` will enable [`compress`](#compress-options) and [`mangle`](#mangle-options). Example: ```javascript var code = "function add(first, second) { return first + second; }"; var result = await minify(code, { sourceMap: true }); console.log(result.code); // minified output: function add(n,d){return n+d} console.log(result.map); // source map ``` There is also a `minify_sync()` alternative version of it, which returns instantly. You can `minify` more than one JavaScript file at a time by using an object for the first argument where the keys are file names and the values are source code: ```ja