在JavaScript开发中,代码压缩是优化网页性能的重要环节，通过移除空格、注释、缩短变量名等方式减小文件体积，从而加快加载速度，常用的JS压缩命令工具包括UglifyJS、Terser、Google Closure Compiler等，这些工具支持命令行操作，可以灵活集成到构建流程中，以下是关于JS压缩命令的详细说明，包括工具特点、使用方法及参数配置。
主流JS压缩工具及命令
UglifyJS
UglifyJS是早期广泛使用的JS压缩工具,支持ES5语法，适合老项目，安装命令为npm install uglify-js -g，基本使用如下：
uglifyjs input.js -o output.js -m -c
参数说明：
-m：启用代码混淆（缩短变量名）-c：启用压缩（移除空格、注释等）-b：格式化输出（用于调试）--compress：自定义压缩规则，如--compress drop_console=true可移除console语句。
Terser
Terser是UglifyJS的分支,支持ES6+语法，成为当前主流工具，安装命令为npm install terser -g，基本使用如下：
terser input.js -o output.js --compress --mangle
参数说明：
--compress：压缩选项，可配置passes（压缩轮数）、drop_console（移除console）等。--mangle：混淆选项，通过--mangle-props可混淆属性名。--source-map：生成source map，方便调试。
Google Closure Compiler
Closure Compiler是Google推出的工具，压缩能力强且支持高级优化，安装需下载JAR包，命令如下：
java -jar compiler.jar --js input.js --js_output_file output.js --compilation_level ADVANCED
参数说明：
--compilation_level：编译级别，可选WHITESPACE_ONLY（仅移除空格）、SIMPLE_OPTIMIZATIONS（基本优化）、ADVANCED（高级优化，需注意兼容性）。--externs：指定外部变量，避免误删。
构建工具集成命令
实际开发中,JS压缩通常通过构建工具自动化执行，以下是常见工具的配置示例：
Webpack
在webpack.config.js中配置TerserPlugin：
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: { drop_console: true },
mangle: true,
},
}),
],
},
};
执行命令webpack --mode production即可自动压缩。
Gulp
使用gulp-terser插件：
const gulp = require('gulp');
const terser = require('gulp-terser');
gulp.task('compress', () =>
gulp.src('src/*.js')
.pipe(terser())
.pipe(gulp.dest('dist'))
);
运行gulp compress执行压缩。
Vite
Vite内置Terser压缩,执行vite build时自动应用，可通过vite.config.js自定义：
export default {
build: {
minify: 'terser',
terserOptions: {
compress: { drop_console: true },
},
},
};
压缩效果对比示例
以下是对同一JS文件使用不同工具压缩后的效果对比（原始文件大小：10KB）：
| 工具 | 压缩后大小 | 压缩时间 | 支持ES6+ | 特点 |
|---|---|---|---|---|
| UglifyJS | 2KB | 2s | 否 | 轻量级，适合ES5项目 |
| Terser | 8KB | 9s | 是 | 速度快，支持现代语法 |
| Closure Compiler | 5KB | 5s | 部分 | 压缩率高，但可能改变逻辑 |
注意事项
- 兼容性：Closure Compiler的
ADVANCED模式可能改变代码逻辑，需充分测试。 - Source Map：生产环境建议生成source map，但需注意安全配置（如不暴露源码）。
- Tree Shaking：结合ES6模块和
sideEffects配置，可进一步移除未使用代码。
相关问答FAQs
Q1: 如何在压缩时保留特定变量不被混淆？
A: 使用Terser时，通过--mangle-props的reserved选项指定变量名，terser input.js -o output.js --mangle-props reserved=['$','require']，Webpack中可通过reserved字段配置，如new TerserPlugin({ terserOptions: { mangle: { reserved: ['React'] } } })。
Q2: 压缩后代码报错如何调试？
A: 生成source map是关键方法，Terser可通过--source-map参数生成，Webpack默认支持，浏览器开发者工具的“Sources”面板中加载source map后即可调试压缩代码，若压缩逻辑导致错误，可逐步关闭压缩选项（如先关闭mangle）定位问题。
