rollup-plugin-terser

What is rollup-plugin-terser?

The rollup-plugin-terser package is a plugin for Rollup, a module bundler for JavaScript, which allows you to minify your JavaScript files using Terser. Minification is the process of removing unnecessary characters from code to reduce its size, thus improving load times in browsers. This plugin integrates Terser into the Rollup build process.

What are rollup-plugin-terser's main functionalities?

Minification

This feature allows you to minify your JavaScript files. The code sample shows how to include the terser plugin in the Rollup configuration to minify the output bundle.

import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'bundle.min.js',
    format: 'iife'
  },
  plugins: [
    terser()
  ]
};

Compress Options

This feature allows you to specify Terser compress options to customize the minification process. In the code sample, the `drop_console` option is set to `true` to remove console logs from the output.

import { terser } from 'rollup-plugin-terser';

export default {
  // ... other rollup config
  plugins: [
    terser({
      compress: {
        drop_console: true
      }
    })
  ]
};

Mangle Options

This feature allows you to mangle property names matching a pattern to shorten the code. In the code sample, properties starting with an underscore are mangled.

import { terser } from 'rollup-plugin-terser';

export default {
  // ... other rollup config
  plugins: [
    terser({
      mangle: {
        properties: {
          regex: /^_/ 
        }
      }
    })
  ]
};

Source Maps

This feature allows you to generate source maps for the minified code, which can be useful for debugging purposes. The code sample demonstrates how to enable source map generation in the Rollup configuration.

import { terser } from 'rollup-plugin-terser';

export default {
  // ... other rollup config
  output: {
    // ... other output options
    sourcemap: true
  },
  plugins: [
    terser({
      sourceMap: true
    })
  ]
};

Other packages similar to rollup-plugin-terser

rollup-plugin-uglify

Similar to rollup-plugin-terser, rollup-plugin-uglify is a plugin that minifies JavaScript files using UglifyJS. It offers similar functionality but uses a different minification library. Terser is a fork of UglifyJS with ES6+ support.

rollup-plugin-babel-minify

This package is another Rollup plugin for minifying JavaScript, but it uses babel-minify (formerly known as babili) instead of Terser. It can be a good choice if you are already using Babel in your build process.

rollup-plugin-closure-compiler

This plugin uses Google's Closure Compiler for minifying JavaScript. It is known for its advanced optimizations and is a good choice for projects where performance is a critical concern. However, it may be more complex to configure compared to rollup-plugin-terser.

README

rollup-plugin-terser

Rollup plugin to minify generated es bundle. Uses terser under the hood.

Install

yarn add rollup-plugin-terser --dev

Note: this package requires rollup@0.66 and higher (including rollup@1.0.0)

Usage

import { rollup } from "rollup";
import { terser } from "rollup-plugin-terser";

rollup({
  input: "main.js",
  plugins: [terser()]
});

Why named export?

1. Module is a namespace. Default export often leads to function/component per file dogma and makes code less maintainable.
2. Interop with commonjs is broken in many cases or hard to maintain.
3. Show me any good language with default exports. It's historical javascriptism.

Options

⚠️ Caveat: any function used in options object cannot rely on its surrounding scope, since it is executed in an isolated context.

terser(options);

options - terser API options

options.sourcemap: boolean

Generates source maps and passes them to rollup. Defaults to true.

options.numWorkers: number

Amount of workers to spawn. Defaults to the number of CPUs minus 1.

options.include: Array<string | RegExp> | string | RegExp

options.exclude: Array<string | RegExp> | string | RegExp

Note: some terser options are set by the plugin automatically:

• module: true is set when format is esm or es
• toplevel: true is set when format is cjs

Specifically include/exclude chunk files names (minimatch pattern, or array of minimatch patterns), By default all chunk files will be minify.

Examples

include/exclude

If you'd like that only some of the files will be minify, then you can filter by include and exclude to do this like so:

// rollup.config.js
import { terser } from "rollup-plugin-terser";

export default {
  input: "index.js",
  output: [
    { file: 'lib.js', format: 'cjs' },
    { file: 'lib.min.js', format: 'cjs' },
    { file: 'lib.esm.js', format: 'es' },
    { dir: '.', entryFileNames: 'lib-[format].js', format: 'iife'  }
  ],
  plugins: [
    terser({
      include: [/^.+\.min\.js$/, '*esm*'], 
      exclude: [ 'some*' ]
    })
  ]
};

Comments

If you'd like to preserve comments (for licensing for example), then you can specify a function to do this like so:

terser({
  output: {
    comments: function(node, comment) {
      var text = comment.value;
      var type = comment.type;
      if (type == "comment2") {
        // multiline comment
        return /@preserve|@license|@cc_on/i.test(text);
      }
    }
  }
});

Alternatively, you can also choose to keep all comments (e.g. if a licensing header has already been prepended by a previous rollup plugin):

terser({
  output: {
    comments: "all"
  }
});

See Terser documentation for further reference.

License

MIT © Bogdan Chadkin