转：webpack代码压缩优化

压缩代码

18 天前30前端开发

 

• 压缩 JavaScript
  • 修改 JavaScript 压缩处理器
• 其余压缩 JavaScript 的方法
• 加快 JavaScript 执行速度
  • 做用域提高
  • 预执行
  • 提高解析
• 压缩 HTML
• 压缩 CSS
  • 配置 CSS 压缩
• 压缩图像
• 总结

 

从 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

Copy

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

webpack.parts.js

const TerserPlugin = require("terser-webpack-plugin"); exports.minifyJavaScript = () => ({ optimization: { minimizer: [new TerserPlugin({ sourceMap: true })], }, });

JavaScript

Copy

将其合并到主配置：

webpack.config.js

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

JavaScript

Copy

若是如今执行 npm run build，您应该看到与以前相同的结果。

默认状况下禁用源映射。您能够经过 sourceMap 标志启用它们。您应该检查 terser-webpack-plugin 以获取更多选项。

要调整 Terser，请附加 terserOptions 相关选项到插件中。

其余压缩 JavaScript 的方法

虽然默认值和 terser-webpack-plugin 适用于此用例，但您能够考虑更多选项：

• babel-minify-webpack-plugin 依赖于 babel-preset-minify，它由 Babel 团队开发。
• webpack-closure-compiler 能够并行执行，有时比 babel-minify-webpack-plugin 的结果更小。closure-webpack-plugin 是另外一种选择。
• butternut-webpack-plugin 在底层使用了 Rich Harris 的实验性 butternut 压缩器。

加快 JavaScript 执行速度

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

做用域提高

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

将 --display-optimization-bailout 选项传递给 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

Copy

与 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

Copy

若是您使用 构建分析章节中讨论的 --json 做为 Webpack 输出选项，则须要设置 canPrint: false

而后，合并到主配置：

webpack.config.js

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

JavaScript

Copy

若是您如今构建项目（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

Copy

compression-webpack-plugin 容许您将生成压缩文件的问题交给 Webpack 处理，从而可能节省服务器上的处理时间。

压缩图像

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

如同在性能章节中讨论的那样使用 cache loader 和 thread-loader 是一个好主意，由于它们具有更多的操做空间。

总结

压缩是您能够采起的最温馨的步骤，以使您的构建更小。回顾一下：

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