JS 压缩（Minify） 是指通过删除 JavaScript 代码中的不必要的空格、换行符、注释以及其他冗余的字符来减小文件的体积。压缩后的 JavaScript 代码仍然可以正常运行，但其可读性和注释将被去除，以达到减少文件大小、提高加载速度和节省带宽的目的。
JS 压缩的特点：
去除空白字符：删除所有的空格、换行符和制表符，减少代码体积。
删除注释：去掉所有的注释，不影响代码的执行。
变量和函数名缩短：有时压缩工具会将长变量名、函数名等缩短成短的字母，以进一步减少代码体积。
代码优化：一些工具还会对代码进行优化，如消除冗余的代码和合并相同的表达式。
压缩前和压缩后的对比
原始 JavaScript 代码（格式化）
javascript
function greet(name) {
// 打印欢迎信息
console.log("Hello, " + name);
}
var userName = "Alice";
greet(userName);
压缩后的 JavaScript 代码（Minified）
javascript
function greet(n){console.log("Hello, "+n)}var userName="Alice";greet(userName);
JS 压缩方法
手动压缩：手动删除空格、换行符和注释，但这种方法不适用于大规模的代码压缩。
在线工具：有许多在线工具可以帮助你快速压缩 JavaScript 代码，例如：
JavaScript Minifier
UglifyJS
Terser
使用构建工具：许多现代前端构建工具（如 Webpack、Gulp、Grunt 等）支持 JavaScript 压缩，并且可以自动化压缩过程。
通过编程语言库：你还可以使用 JavaScript 的压缩库，如 UglifyJS 或 Terser，来进行压缩。
使用在线工具进行压缩
JavaScript Minifier：访问 JavaScript Minifier，将你的代码粘贴进去，点击压缩按钮，就能得到压缩后的代码。
UglifyJS：访问 UglifyJS，选择你要压缩的代码并点击压缩按钮。
使用构建工具进行自动化压缩
Webpack 示例
Webpack 是一个常用的 JavaScript 打包工具，它可以通过 TerserWebpackPlugin 插件来压缩 JavaScript 代码。
安装 Webpack 和 Terser 插件：
bash
npm install --save-dev webpack webpack-cli terser-webpack-plugin
配置 Webpack：
javascript
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
},
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
};
运行 Webpack：
bash
npx webpack --mode production
Webpack 会自动将你的 JavaScript 代码进行压缩。
Gulp 示例
使用 Gulp 可以通过 gulp-uglify 插件来压缩 JavaScript 文件。
安装 Gulp 和 gulp-uglify：
bash
npm install --save-dev gulp gulp-uglify
配置 Gulp 文件：
javascript
const gulp = require('gulp');
const uglify = require('gulp-uglify');
gulp.task('compress', () => {
return gulp.src('src/js/*.js') // 选择源文件
.pipe(uglify()) // 压缩代码
.pipe(gulp.dest('dist/js')); // 输出压缩后的文件
});
运行 Gulp：
bash
npx gulp compress
使用 JavaScript 库进行压缩
Terser 示例
Terser 是一个流行的 JavaScript 压缩库，支持 ES6+ 的代码压缩。
安装 Terser：
bash
npm install terser
使用 Terser 压缩 JavaScript 文件：
javascript
const Terser = require("terser");
const code = `
function greet(name) {
console.log("Hello, " + name);
}
greet("Alice");
`;
// 压缩代码
const result = Terser.minify(code);
console.log(result.code); // 输出压缩后的代码
小结
JavaScript 压缩（Minify）是通过去除空格、换行符、注释等不必要的字符来减小文件大小。你可以通过在线工具、构建工具、或使用 JavaScript 库来自动化压缩过程。压缩后的 JavaScript 代码在减少文件体积的同时不会影响功能，因此特别适合用于生产环境中，提升加载速度和节省带宽。