代码压缩

为什么要进行代码压缩？

减少代码体积；破坏代码可读性，提升破解成本。

什么时候进行代码压缩？

生产环境。

如何进行代码压缩？

使用压缩工具。目前流行的压缩工具有两种：UglifyJs和Terser。

UglifyJs是一个传统的代码压缩工具，已存在多年，曾经是前端应用的必备工具，但由于它不支持ES6语法，所以目前的流行度已有所下降。

Terser是一个新起的代码压缩工具，支持ES6+语法，因此被很多构建工具内置使用。webpack安装后会内置Terser，当启用生产环境后即可用其进行代码压缩。

因此，我们选择Terser。

Terser

在Terser的官网可尝试它的压缩效果。

webpack自动集成了Terser，使用方式如下：

const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  optimization: {
    // 是否要启用压缩，默认情况下，生产环境会自动开启
    minimize: true, 
    minimizer: [ // 压缩时使用的插件，可以有多个
      new TerserPlugin(), 
      new OptimizeCSSAssetsPlugin()
    ],
  },
}

代码压缩 ​

Terser ​

代码压缩

Terser