webpack 图像压缩_转：webpack代码压缩优化

从 Webpack 4 开始，默认情况下使用 terser 压缩生产环境下的输出结果。Terser 是一款兼容 ES2015 + 的 JavaScript 压缩器。与 UglifyJS(许多项目的早期标准)相比，它是面向未来的选择。有一个 UglifyJS 的分支—— uglify-es，但由于它不再维护，于是就从这个分支诞生出了一个独立分支，它就是 terser。

尽管 webpack 4 默认情况下会压缩输出，但如果您想进一步调整压缩行为或更换压缩器，那么，最好了解如何自定义压缩。

压缩 JavaScript

所谓压缩就是将代码变的更小，安全转换是指通过重写代码而不改变代码逻辑。这方面的好例子包括重命名变量，甚至是删除整个的访问不到的代码块(if (false))。

不安全的转换可能会破坏代码，因为它们可能会丢失底层代码所依赖的隐含内容。例如，Angular 1在使用模块时需要特定的函数参数命名。除非在这种情况下采取预防措施，否则重写参数会破坏代码。

修改 JavaScript 压缩处理器

在 Webpack 4 中，通过两个配置字段控制压缩过程：optimization.minimize 字段切换压缩处理器，而 optimization.minimizer 数组用来配置压缩处理器。

为了调整默认值，我们将 terser-webpack-plugin 附加到项目中，以便可以调整它。

首先，请将插件包含在项目中：

npm install terser-webpack-plugin --save-dev

Bash

要将其附加到配置，请首先为其定义一个局部配置：

webpack