深入理解 Vue CLI 在生产环境下，如何通过 `TerserPlugin` 进行代码压缩、混淆和 Tree Shaking。

好的，咱们这就开始今天的“Vue CLI 生产环境下的 TerserPlugin 代码优化之旅”。大家准备好，坐稳扶好，我们要起飞啦！

1. 欢迎来到代码瘦身训练营！

各位观众老爷们，大家好！我是今天的“代码瘦身教练”——你们可以叫我“代码马甲线”，也可以叫我“体积管理大师”。今天咱们要聊的是一个非常重要的议题：如何在 Vue CLI 项目的生产环境中，利用 TerserPlugin，让我们的代码变得更小、更快、更神秘！

为什么要进行代码优化？这就像我们减肥一样，目的是为了更健康、更高效、更吸引眼球（用户）。对于代码来说，优化后的体积更小，加载速度更快，用户体验自然更好。而且，经过混淆的代码，就像涂了一层迷彩，增加了代码被破解的难度，提高了安全性。

2. TerserPlugin：代码瘦身的秘密武器

TerserPlugin 是什么？简单来说，它就是 webpack 的一个插件，专门负责压缩 JavaScript 代码。在 Vue CLI 的生产环境中，webpack 默认会使用 TerserPlugin 来进行代码的压缩和混淆。

那么，TerserPlugin 到底做了什么呢？

• 代码压缩 (Minification): 移除代码中的空格、换行符、注释等不必要的字符，让代码变得“紧凑”。
• 代码混淆 (Manglement): 将变量名、函数名等替换为更短、更无意义的名称，增加代码的可读性难度。
• Tree Shaking: 移除未使用的代码，就像修剪树枝一样，只保留“活”的代码。

是不是听起来很厉害？别急，咱们一步一步来，先看看如何在 Vue CLI 项目中配置和使用 TerserPlugin。

3. Vue CLI 与 TerserPlugin 的“蜜月期”

在 Vue CLI 创建的项目中，TerserPlugin 已经默认配置好了。你不需要手动安装它，也不需要手动引入它。Vue CLI 会自动处理这些事情。

但是，这并不意味着你不需要了解它的配置。 有时候，默认的配置可能并不满足你的需求，你需要进行一些定制化的配置。

Vue CLI 提供了 vue.config.js 文件，你可以在这里修改 webpack 的配置。要修改 TerserPlugin 的配置，你需要使用 configureWebpack 或 chainWebpack 选项。

3.1 configureWebpack 方式

configureWebpack 允许你直接修改 webpack 的配置对象。

// 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: {
              safari10: true,
            },
            output: {
              comments: false, // 移除注释
            },
          },
        }),
      ];
    }
  },
};

这段代码的意思是：

• 只有在生产环境下 (process.env.NODE_ENV === 'production') 才会进行配置。
• 修改 config.optimization.minimizer 数组，添加一个新的 TerserPlugin 实例。
• terserOptions 对象包含了 TerserPlugin 的具体配置。
  • compress：配置代码压缩选项。
    • drop_console: true：移除 console.log 语句。
    • drop_debugger: true：移除 debugger 语句。
  • mangle：配置代码混淆选项。
    • safari10: true：兼容 Safari 10。
  • output：配置输出选项。
    • comments: false：移除注释。

3.2 chainWebpack 方式

chainWebpack 允许你使用链式调用的方式修改 webpack 的配置。这种方式更加灵活，也更易于阅读。

// vue.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer('terser').use(TerserPlugin, [
        {
          terserOptions: {
            compress: {
              drop_console: true,
              drop_debugger: true,
            },
            mangle: {
              safari10: true,
            },
            output: {
              comments: false,
            },
          },
        },
      ]);
    }
  },
};

这段代码和上面的 configureWebpack 方式实现的功能是一样的，只是使用了不同的方式来配置 TerserPlugin。

• config.optimization.minimizer('terser')：获取名为 terser 的 minimizer（实际上就是 TerserPlugin）。
• .use(TerserPlugin, [...])：使用 TerserPlugin，并传入配置项。

选择哪种方式？

configureWebpack 更加直接，适合简单的配置修改。chainWebpack 更加灵活，适合复杂的配置修改。根据你的实际情况选择即可。

4. TerserPlugin 的配置选项：深度解析

TerserPlugin 提供了大量的配置选项，可以让你精确控制代码压缩和混淆的行为。这里我们重点介绍几个常用的选项。

| 选项 | 类型 | 描述