@rollup/plugin-terser

What is @rollup/plugin-terser?

@rollup/plugin-terser is a Rollup plugin that integrates Terser, a JavaScript minifier, into the Rollup build process. It helps in reducing the size of the JavaScript bundles by removing unnecessary whitespace, comments, and other non-essential code elements, as well as performing advanced optimizations like dead code elimination.

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

Basic Minification

This feature allows you to perform basic minification of your JavaScript code. By including the `terser` plugin in the Rollup configuration, the output bundle will be minified, reducing its size.

const { terser } = require('@rollup/plugin-terser');

module.exports = {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [terser()]
};

Custom Terser Options

This feature allows you to customize the Terser options. For example, you can enable top-level variable and function name mangling and remove console statements from the output bundle.

const { terser } = require('@rollup/plugin-terser');

module.exports = {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    terser({
      mangle: {
        toplevel: true
      },
      compress: {
        drop_console: true
      }
    })
  ]
};

Source Map Generation

This feature allows you to generate source maps for the minified code. By enabling the `sourcemap` option in both the Rollup output configuration and the Terser plugin, you can create source maps that help in debugging the minified code.

const { terser } = require('@rollup/plugin-terser');

module.exports = {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs',
    sourcemap: true
  },
  plugins: [terser({ sourcemap: true })]
};

Other packages similar to @rollup/plugin-terser

uglify-js

UglifyJS is another popular JavaScript minifier that can be used with Rollup through the `rollup-plugin-uglify` plugin. It offers similar functionalities to Terser, such as code compression and mangling. However, Terser is a fork of UglifyJS and is generally considered to have better support for modern JavaScript features.

babel-minify

Babel Minify is a minifier based on the Babel toolchain. It can be used with Rollup through the `rollup-plugin-babel-minify` plugin. While it offers similar minification capabilities, it is more tightly integrated with Babel and can be a good choice if you are already using Babel in your build process.

esbuild

esbuild is a fast JavaScript bundler and minifier. It can be used with Rollup through the `rollup-plugin-esbuild` plugin. esbuild is known for its speed and efficiency, making it a strong alternative to Terser for minification tasks.

README

@rollup/plugin-terser

🍣 A Rollup plugin to generate a minified bundle with terser.

Requirements

This plugin requires an LTS Node version (v14.0.0+) and Rollup v2.0+.

Install

Using npm:

npm install @rollup/plugin-terser --save-dev

Usage

Create a rollup.config.js configuration file and import the plugin:

import terser from '@rollup/plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [terser()]
};

Then call rollup either via the CLI or the API.

Options

The plugin accepts a terser Options object as input parameter, to modify the default behaviour.

In addition to the terser options, it is also possible to provide the following options:

maxWorkers

Type: Number
Default: undefined

Instructs the plugin to use a specific amount of cpu threads.

import terser from '@rollup/plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [
    terser({
      maxWorkers: 4
    })
  ]
};

Meta

CONTRIBUTING

LICENSE (MIT)