各位观众老爷，晚上好！今天咱们聊聊 Vue CLI 在生产环境下的代码优化神器——TerserPlugin。这玩意儿，说白了，就是个代码“瘦身”专家，能把咱们辛辛苦苦写的代码，压缩、混淆、剔除没用的部分，让它在浏览器里跑得更快、更溜。
开场白：为啥要优化？
想象一下，你开着一辆豪华跑车，结果后备箱里塞满了乱七八糟的杂物，速度能快吗？代码也一样，冗余的代码、没用的变量、重复的逻辑，都会拖慢网页的速度。用户可没那么多耐心等你加载完，分分钟就关掉走人了。所以，优化代码，提高性能，是每个前端工程师的必修课。
Vue CLI 与 Webpack 的爱恨情仇
Vue CLI 是什么？它是一个官方提供的脚手架工具，能帮你快速搭建 Vue 项目，省去配置各种繁琐的工具的麻烦。而 Webpack，则是 Vue CLI 背后的“男人”，负责打包、构建、转换你的代码。
TerserPlugin，就是 Webpack 的一个插件。Webpack 就像一个加工厂，各种插件就是不同的生产线。TerserPlugin 这条生产线，专门负责代码压缩和混淆。
TerserPlugin 的原理：压缩、混淆、Tree Shaking
TerserPlugin 主要做了三件事：
- 压缩 (Minification): 就像把你的衣服塞进真空收纳袋一样，移除代码中的空格、注释、换行符等不必要的字符，减小文件体积。
- 混淆 (Mangling): 把变量名、函数名改成一些无意义的短字符串，比如把
userName改成a，calculateSum改成b。这样做的好处是，一方面可以减小文件体积，另一方面可以增加代码的阅读难度，防止别人轻易破解你的代码。 - Tree Shaking: 就像修剪树枝一样，移除代码中没有被使用到的部分。想象一下，你引入了一个很大的库，但只用了其中的几个函数，
Tree Shaking就能把没用到的部分给“摇”掉，只保留你需要的，大幅减小文件体积。
Vue CLI 如何配置 TerserPlugin？
Vue CLI 默认情况下，会在生产环境下启用 TerserPlugin，并进行一些默认的配置。但如果你想自定义配置，也是可以的。
有两种方式可以配置：
vue.config.js文件： 这是 Vue CLI 项目的配置文件，你可以在这里修改 Webpack 的配置。chainWebpack选项：vue.config.js中提供了一个chainWebpack选项，允许你更灵活地修改 Webpack 的配置。
vue.config.js 配置示例：
// vue.config.js
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer = [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 移除 console.log
drop_debugger: true, // 移除 debugger 语句
},
mangle: true, // 开启混淆
},
}),
];
}
},
};代码解释：
process.env.NODE_ENV === 'production'：判断当前是否是生产环境。config.optimization.minimizer：Webpack 的优化器配置，用于配置代码压缩工具。new TerserPlugin(...)：创建一个TerserPlugin实例，并传入配置项。terserOptions：TerserPlugin的配置项，用于控制压缩和混淆的行为。compress：压缩选项，用于控制代码的压缩行为。drop_console: true：移除代码中的console.log语句。drop_debugger: true：移除代码中的debugger语句。
mangle: true：开启混淆。
chainWebpack 配置示例：
// vue.config.js
module.exports = {
chainWebpack: (config) => {
config.optimization.minimizer('terser').tap((args) => {
const terserOptions = args[0].terserOptions;
terserOptions.compress.drop_console = true;
terserOptions.compress.drop_debugger = true;
return args;
});
},
};代码解释：
config.optimization.minimizer('terser')：获取名为terser的优化器，也就是TerserPlugin。.tap((args) => ...)：允许你修改TerserPlugin的配置项。args[0].terserOptions：获取TerserPlugin的配置项。terserOptions.compress.drop_console = true：移除代码中的console.log语句。terserOptions.compress.drop_debugger = true：移除代码中的debugger语句。return args：返回修改后的配置项。
TerserPlugin 的常用配置项：
| 配置项 | 类型 | 描述