Webpack 删除未使用的代码

从 webpack 4+ 开始，生产环境下 webpack 会自动为您优化和减少捆绑包的大小，它使用的优化技术是 Tree-Shaking。本质上，它是一种用于删除未使用代码的优化技术，通过分析静态的 ES 模块，来移除未使用的代码。

您还可以通过在配置文件中添加带有特定字段的 optimization 对象来手动优化应用程序。

minimize 字段用于指示 webpack 最小化包大小。默认情况下，webpack 将尝试使用 TerserPlugin 来实现这一点，它是 webpack 附带的一个代码压缩包。

minimize 适用于通过从代码中删除不必要的数据来最小化代码，从而减少处理后生成的代码大小。

我们还可以通过在 optimization 对象中添加一个 minimizer 数组字段来使用其他首选缩小器。下面的 uglifyjs-webpack-plugin 就是一个例子。

// webpack.config.js
const Uglify = require("uglifyjs-webpack-plugin")

module.exports = {
  optimization {
    minimize : true,
    minimizer : [
      new Uglify({
        cache : true,
        test: /\.js(\?.*)?$/i,
      })
    ]
  } 
}

uglifyjs-webpack-plugin 有两个非常重要的选项。首先，启用 cache 意味着 只有当现有文件发生新更改时，Uglify 才会缩小它们，而 test 选项指定了我们要缩小的特定文件类型。

注意：uglifyjs-webpack-plugin 提供了一个全面的选项列表，可用于缩小代码。