rollup-plugin-uglify

What is rollup-plugin-uglify?

The rollup-plugin-uglify package is a Rollup plugin that integrates UglifyJS to minify JavaScript code. It helps reduce the size of the output bundle by removing unnecessary whitespace, comments, and other non-essential code elements, making it ideal for production builds.

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

Basic Minification

This feature allows you to minify your JavaScript code using UglifyJS. The code sample demonstrates how to use the rollup-plugin-uglify to minify a JavaScript file during the Rollup build process.

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

rollup({
  input: 'src/main.js',
  plugins: [uglify()]
}).then(bundle => {
  return bundle.write({
    file: 'dist/bundle.min.js',
    format: 'iife'
  });
});

Custom UglifyJS Options

This feature allows you to pass custom options to UglifyJS to control the minification process. The code sample shows how to configure the plugin to remove console statements and produce non-beautified output.

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

rollup({
  input: 'src/main.js',
  plugins: [uglify({
    compress: {
      drop_console: true
    },
    output: {
      beautify: false
    }
  })]
}).then(bundle => {
  return bundle.write({
    file: 'dist/bundle.min.js',
    format: 'iife'
  });
});

Other packages similar to rollup-plugin-uglify

terser

Terser is a popular JavaScript minifier that is a fork of UglifyJS with ES6+ support. It is often used as a replacement for UglifyJS in modern JavaScript projects. Compared to rollup-plugin-uglify, Terser can handle newer JavaScript syntax and is generally more up-to-date with the latest ECMAScript standards.

rollup-plugin-terser

This is a Rollup plugin that integrates Terser for minification. It is similar to rollup-plugin-uglify but uses Terser under the hood, providing better support for modern JavaScript features. It is often preferred over rollup-plugin-uglify for projects using ES6+ syntax.

README

rollup-plugin-uglify

Rollup plugin to minify generated bundle. Uses UglifyJS under the hood. There are a few improvements over native uglify:

• uglify is run in worker for every chunk
• errors are displayed with babel code frame

Note: uglify-js is able to transpile only es5 syntax. If you want to transpile es6+ syntax use terser instead

Install

yarn add rollup-plugin-uglify --dev

Note: this package requires rollup@0.66 and higher

Usage

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

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

Options

uglify(options);

options - uglifyJS 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.

Examples

Comments

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

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

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

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

See UglifyJS documentation for further reference.

License

MIT © Bogdan Chadkin