Build Tool Minification
Minification in build tools.
Webpack Minification
Production mode (auto-minifies)
mode: production
Custom Terser config
const TerserPlugin = require(terser-webpack-plugin);
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true
}
}
})
]
}
Vite Minification
Build config (vite.config.js)
build: {
minify: terser, // or esbuild (default)
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
}
esbuild (faster, default)
minify: esbuild
Gulp Minification
gulpfile.js
const gulp = require(gulp);
const uglify = require(gulp-uglify);
const cleanCSS = require(gulp-clean-css);
gulp.task(minify-js, () =>
gulp.src(src/*.js)
.pipe(uglify())
.pipe(gulp.dest(dist))
);
Source Maps
Generate source maps for debugging
// Webpack
devtool: source-map
// Vite
build: {
sourcemap: true
}
Terser with source maps
terser input.js --source-map -o output.min.js