在前端工程化构建流程中，Webpack是主流的打包工具，而Terser插件是处理JavaScript代码压缩的核心工具。默认情况下Terser会执行包括变量名缩短、移除空白字符、删除换行符在内的多项压缩操作，但部分开发场景需要保留代码的换行结构，同时又要实现变量名的最小化来减小包体积，这就需要针对性调整Terser的配置参数。
Terser插件基础认知
Terser是一款专门用于压缩ECMAScript代码的工具，支持ES6+语法，Webpack从4.x版本开始就内置了TerserWebpackPlugin，无需额外安装即可使用。它的核心能力包括删除无用代码、缩短变量名、优化语法结构等，默认配置会尽可能压缩代码体积，因此会移除所有不必要的换行和空白字符。
核心配置项说明
要实现最小化变量名同时保留换行符，需要关注两个关键配置维度：
- 变量名最小化相关配置：通过
mangle选项控制，该选项默认开启，会对变量名、函数名进行缩短处理，比如将userName缩短为a这类短标识符，达到减小代码体积的目的。 - 保留换行符相关配置：通过
format选项下的beautify和preserve_annotations等参数控制，其中beautify设置为true时会保留代码的格式化结构，包括换行符，同时可以配合其他参数调整输出格式。
完整Webpack配置示例
以下是适配该需求的完整Webpack配置文件示例，假设你使用的是Webpack 5版本：
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
// 控制变量名最小化，默认开启，无需额外修改
mangle: true,
// 格式化相关配置，用于保留换行符
format: {
beautify: true, // 开启美化输出，保留换行和缩进
preamble: '', // 可选，添加文件头注释
comments: false // 可选，是否保留注释，按需设置
}
}
})
]
}
};配置验证方法
完成配置后，执行Webpack打包命令，查看输出的bundle.js文件：
- 检查变量名是否已经被缩短，比如原来的长变量名是否变成了单字母或短标识符，确认变量名最小化生效。
- 检查代码是否保留了原有的换行结构，没有出现所有代码挤在同一行的情况，确认换行符保留生效。
注意事项
需要注意beautify设置为true后，虽然保留了换行符，但代码体积会比完全压缩的模式稍大，如果项目对包体积要求极高，需要权衡是否保留换行。另外如果项目中使用了特定的变量名需要排除混淆，可以在mangle选项中配置reserved数组，比如mangle: { reserved: ['mySpecialVar'] }，这样该变量名就不会被缩短。