【代码瘦身秘籍】揭秘Terser的压缩魔法（7）

代码压缩是前端优化中的一个重要环节，它可以帮助减少代码体积，提高加载速度，同时还可以破坏代码的可读性，提升破解成本。在生产环境中，代码压缩是必不可少的步骤。

1. 为什么进行代码压缩

1. 减少代码体积：压缩后的代码体积更小，传输速度更快，可以显著提高页面加载速度。
2. 破坏代码的可读性：压缩后的代码难以阅读和理解，增加了逆向工程的难度，提升了破解成本。

2. 什么时候进行代码压缩

代码压缩主要在生产环境中进行。开发环境中通常不进行代码压缩，以保持代码的可读性和调试的便利性。

3. 使用什么压缩工具

目前最流行的代码压缩工具主要有两个：

• UglifyJs：这是一个传统的代码压缩工具，已存在多年，曾经是前端应用的必备工具。但由于它不支持 ES6 语法，所以目前的流行度已有所下降。
• Terser：这是一个新起的代码压缩工具，支持 ES6+ 语法，因此被很多构建工具内置使用。Webpack 安装后会内置 Terser，当启用生产环境后即可用其进行代码压缩。

因此，我们选择 Terser。

4. 关于副作用（Side Effect）

副作用是指函数运行过程中，可能会对外部环境造成影响的功能。如果函数中包含以下代码，该函数称为副作用函数：

• 异步代码
• 操作 localStorage
• 对外部数据的修改

如果一个函数没有副作用，同时，函数的返回结果仅依赖参数，则该函数称为纯函数（Pure Function）。

5. Terser

Terser 是一个非常强大的代码压缩工具，支持 ES6+ 语法。你可以在 Terser 的官网上尝试它的压缩效果。

Terser 官网：https://terser.org/

6. Webpack + Terser

Webpack 自动集成了 Terser，但在某些情况下，你可能需要更改或添加压缩工具，或者对 Terser 进行配置。以下是一个示例配置：

const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  mode: 'production', // 设置为生产模式
  optimization: {
    // 是否要启用压缩，默认情况下，生产环境会自动开启
    minimize: true,
    minimizer: [ // 压缩时使用的插件，可以有多个
      new TerserPlugin({
        // Terser 插件的配置选项
        terserOptions: {
          ecma: 6, // 指定 ECMAScript 版本
          compress: {
            warnings: false, // 是否显示警告信息
            drop_console: true, // 删除所有的 `console` 语句
            drop_debugger: true, // 删除所有的 `debugger` 语句
          },
          mangle: true, // 是否修改变量名
          output: {
            comments: false, // 是否保留注释
          },
        },
      }),
      new OptimizeCSSAssetsPlugin(),
    ],
  },
};

7. 配置详解

• mode: 设置为 production 模式，Webpack 会自动启用一些优化，包括代码压缩。
• minimize: 是否启用压缩，默认情况下，生产环境会自动开启。
• minimizer: 压缩时使用的插件，可以有多个。这里使用了 TerserPlugin 和 OptimizeCSSAssetsPlugin。

7.1 TerserPlugin 配置

• terserOptions: Terser 的配置选项。
  • ecma: 指定 ECMAScript 版本。
  • compress: 压缩选项。
    • warnings: 是否显示警告信息。
    • drop_console: 是否删除所有的 console 语句。
    • drop_debugger: 是否删除所有的 debugger 语句。
  • mangle: 是否修改变量名。
  • output: 输出选项。
    • comments: 是否保留注释。

7.2 OptimizeCSSAssetsPlugin

OptimizeCSSAssetsPlugin 用于优化和压缩 CSS 资源。如果你的项目中使用了 CSS，建议配置这个插件。

8. 总结

通过配置 Terser，可以显著减少代码体积，提高加载速度，同时还可以破坏代码的可读性，提升破解成本。