Webpack plugin that integrates Terser JavaScript minifier for code optimization and compression
npx @tessl/cli install tessl/npm-terser-webpack-plugin@5.3.0Terser Webpack Plugin integrates the Terser JavaScript minifier into webpack's optimization pipeline, enabling JavaScript code compression and optimization during the build process. It supports multiple minification engines (terser, uglify-js, swc, esbuild) with extensive configuration options for production builds.
npm install terser-webpack-plugin --save-devconst TerserPlugin = require('terser-webpack-plugin');For ESM environments:
import TerserPlugin from 'terser-webpack-plugin';const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
test: /\.js(\?.*)?$/i,
parallel: true,
extractComments: true,
terserOptions: {
compress: {
drop_console: true,
},
mangle: true,
},
}),
],
},
};Terser Webpack Plugin is built around several key components:
TerserPlugin class that integrates with webpack's compilation hooksCore webpack plugin functionality with comprehensive configuration options for file matching, parallel processing, and comment extraction.
class TerserPlugin {
constructor(options?: PluginOptions);
apply(compiler: Compiler): void;
}
interface PluginOptions {
test?: Rules;
include?: Rules;
exclude?: Rules;
parallel?: boolean | number;
extractComments?: ExtractCommentsOptions;
minify?: MinimizerImplementation;
terserOptions?: MinimizerOptions;
}
type Rules = RegExp | string | Array<RegExp | string>;Built-in minification implementations for different JavaScript minifiers, each with specific optimization capabilities.
// Static methods on TerserPlugin class
static terserMinify(
input: Input,
sourceMap?: SourceMapInput,
minimizerOptions?: any,
extractComments?: ExtractCommentsOptions
): Promise<MinimizedResult>;
static uglifyJsMinify(
input: Input,
sourceMap?: SourceMapInput,
minimizerOptions?: any,
extractComments?: ExtractCommentsOptions
): Promise<MinimizedResult>;
static swcMinify(
input: Input,
sourceMap?: SourceMapInput,
minimizerOptions?: any
): Promise<MinimizedResult>;
static esbuildMinify(
input: Input,
sourceMap?: SourceMapInput,
minimizerOptions?: any
): Promise<MinimizedResult>;Helper functions for task management, memoization, and internal plugin operations.
function throttleAll<T>(limit: number, tasks: Task<T>[]): Promise<T[]>;
function memoize<T>(fn: () => any): () => T;interface MinimizedResult {
code: string;
map?: SourceMapInput;
errors?: (string | Error)[];
warnings?: (string | Error)[];
extractedComments?: string[];
}
interface Input {
[file: string]: string;
}
type ExtractCommentsOptions =
| boolean
| string
| RegExp
| ExtractCommentsFunction
| ExtractCommentsObject;
interface ExtractCommentsObject {
condition?: ExtractCommentsCondition;
filename?: string | ((fileData: any) => string);
banner?: string | boolean | ((commentsFile: string) => string);
}
type ExtractCommentsCondition =
| boolean
| 'all'
| 'some'
| RegExp
| ExtractCommentsFunction;
interface ExtractCommentsFunction {
(
astNode: any,
comment: {
value: string;
type: 'comment1' | 'comment2' | 'comment3' | 'comment4';
pos: number;
line: number;
col: number;
}
): boolean;
}
interface MinimizerImplementation<T> {
(
input: Input,
sourceMap: SourceMapInput | undefined,
minifyOptions: MinimizerOptions<T>,
extractComments?: ExtractCommentsOptions
): Promise<MinimizedResult>;
getMinimizerVersion?(): string | undefined;
supportsWorkerThreads?(): boolean | undefined;
}
type MinimizerOptions<T> = PredefinedOptions<T> & T;
interface PredefinedOptions<T> {
module?: boolean | string;
ecma?: number | string;
}