压缩代码

18 天前30

从 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.parts.js

const TerserPlugin = require("terser-webpack-plugin");

exports.minifyJavaScript = () => ({
optimization: {
minimizer: [new TerserPlugin({ sourceMap: true })],
},
});
JavaScript

将其合并到主配置:

webpack.config.js

const productionConfig = merge([
parts.clean(PATHS.build), parts.minifyJavaScript(), ...
]);
JavaScript

如果现在执行 npm run build,您应该看到与之前相同的结果。

其他压缩 JavaScript 的方法

虽然默认值和 terser-webpack-plugin 适用于此用例,但您可以考虑更多选项:

加快 JavaScript 执行速度

特定的解决方案允许您预处理代码,以便它运行得更快。它们补充了压缩技术,可以分为范围提升,预处理和提升解析。这些技术有时可能会增加整体包的大小,同时加快代码的执行速度。

作用域提升

从 Webpack 4 开始,它默认在生产环境下使用作用域提升。它将所有模块提升到单个范围,而不是为每个模块编写单独的闭包。这样做会减慢构建速度,但会为您提高包的执行速度。在 Webpack 博客上阅读有关作用域提升的更多信息

预执行

prepack-webpack-plugin 使用 Prepack,一个JavaScript 局部执行器。它重写了可以在编译时完成的计算,从而加快了代码执行速度。另请参阅 val-loader 和 babel-plugin-preval 以获取其他解决方案。

提升解析

optimize-js-plugin 通过包装立即执行函数的方式补充了其他解决方案,它增强了 JavaScript 代码最初解析的方式。该插件依赖于 Nolan Lawson 的optimize-js

压缩 HTML

如果您使用 html-loader 处理 HTML 模板,则可以使用posthtml 对模板进行预处理。您还可以使用 posthtml-minifier 压缩 HTML。

压缩 CSS

clean-css-loader 使您可以使用流行的 CSS 压缩器 clean-css

optimize-css-assets-webpack-plugin 是一个基于选项的插件,可以在 CSS 资源上应用选定的压缩器。使用 MiniCssExtractPlugin 可能导致重复的 CSS,因为它只合并文本块。OptimizeCSSAssetsPlugin 通过对生成的结果进行操作来避免这个问题,从而可以产生更好的结果。

配置 CSS 压缩

在可用的解决方案中,OptimizeCSSAssetsPlugin 最好的选择了。要将其添加到配置中,请先安装它和 cssnano

npm install optimize-css-assets-webpack-plugin cssnano --save-dev
Bash

与 JavaScript 一样,您可以将该想法包含在部分配置中:

webpack.parts.js

const OptimizeCSSAssetsPlugin = require(
"optimize-css-assets-webpack-plugin"
);
const cssnano = require("cssnano"); exports.minifyCSS = ({ options }) => ({
plugins: [
new OptimizeCSSAssetsPlugin({
cssProcessor: cssnano,
cssProcessorOptions: options,
canPrint: false,
}),
],
});
JavaScript

然后,合并到主配置:

webpack.config.js

const productionConfig = merge([
...
parts.minifyJavaScript(), parts.minifyCSS({
options: {
discardComments: {
removeAll: true,
},
// 在安全模式下运行 cssnano 从而避免潜在的不安全转换
safe: true,
},
}), ...
]);
JavaScript

如果您现在构建项目(npm run build),您应该注意到 CSS 已经变得更小,因为注释也被去掉了:

Hash: f51ecf99e0da4db99834
Version: webpack 4.1.1
Time: 3125ms
Built at: 3/16/2018 5:32:55 PM
Asset Size Chunks Chunk Names
chunk.0.js 162 bytes 0 [emitted]
chunk.1.js 96.8 KiB 1 [emitted] vendors~main
main.js 2.19 KiB 2 [emitted] main main.css 1.2 KiB 2 [emitted] main
vendors~main.css 1.32 KiB 1 [emitted] vendors~main chunk.0.js.map 204 bytes 0 [emitted]
chunk.1.js.map 235 KiB 1 [emitted] vendors~main
...
Bash

压缩图像

我们可以使用 img-loaderimagemin-webpack 和 imagemin-webpack-plugin 来减小图像大小。这些包会在底层使用一些图片优化处理器。

如同在性能章节中讨论的那样使用 cache loader 和 thread-loader 是一个好主意,因为它们具备更多的操作空间。

总结

压缩是您可以采取的最舒适的步骤,以使您的构建更小。回顾一下:

  • 压缩过程会分析您的源代码,如果您使用安全转换,则将其转换为具有相同含义的较小形式。特定的不安全转换允许您达到更小的结果,同时可能破坏依赖于精确参数命名的代码。
  • Webpack 默认使用 Terser 在生产环境下执行压缩。其他解决方案,例如 babel-minify-webpack-plugin,提供了相似的功能,但需要一些相应的依赖和配置。
  • 除了JavaScript 之外,还可以压缩其他资源,例如 CSS、HTML 和图像。压缩这些资源需要特定的技术,这些技术必须依赖于特定的 loader 和插件。
05-26 22:34