前言
Webpack 作为前端开发中常用的模块打包工具， 在众多开发者和团队中得到了广泛的应用和普及。在 Webpack 4 的升级中，其性能和优化机制也得到了极大的提升和改进。
但是，我们在实践中发现 Webpack 打包的输出文件大小却是一个 「瓶颈」，存在非常大的优化空间。
因此，本文将从输出文件大小这个重要的指标，深入研究并探讨 Webpack 4 的优化机制。
Webpack 的输出文件
Webpack 构建的项目最终输出的文件主要包括以下类型：
- HTML 文件
- JavaScript 文件
- CSS 文件
- 图像等其他文件
其中比较核心的，就是 JavaScript 文件。
Webpack 开发者中常常用到的命令：webpack --config webpack.config.js，可以看到 Webpack 的输出信息。
----- --------------------
-------- ------- ------
----- ------
----- --- ---------- --------
----- ---- ------ ----- -----
------------------------- ---- -- - --------- ---
--------------------------------- ---- -- - --------- -----------
---------- ---- -- ---------
----------------------------- ---- -- - --------- ---
------------------------------------- ---- -- - --------- -----------上面展示了 Webpack 输出文件的一部分信息。其中关键部分如下：
app.d5d5e5ec1bc30f8b24.js：应用的 JavaScript 文件vendors~app.d5d5e5ec1bc30f8b24.js：依赖库的 JavaScript 文件index.html：应用的入口文件*.js.map：Webpack 打包的 source Map 文件
这里，我们只需要关注 JavaScript 文件 app.d5d5e5ec1bc30f8b24.js 和 vendors~app.d5d5e5ec1bc30f8b24.js。
Webpack 的优化机制
在 Webpack 4 中，有许多内置的优化机制。下面针对 JavaScript 输出文件的优化机制进行详细说明：
Tree Shaking
Tree Shaking 是 Webpack 4 的一个重要特性，它可以实现从代码库中删除未引用的模块代码，减少打包后的文件大小。
根据官方文档的介绍，Tree Shaking 利用了 ES6 的模块系统中，import 和 export 都是静态化的特性，可以静态分析出代码依赖关系从而进行死代码的消除。
在 Webpack 4 中，默认进行了 Tree Shaking 的操作，无需额外配置。
举个例子来看。下面是一个简单的脚本：
-------- --------- - ------ - - -- - -------- ------- - ------ - - - - -- - ------ - ------- ---- --
另一端，在另一个文件中，我们仅仅只使用了其中一个函数：
------ - ------ - ---- --------- -----------------------
那么在最终输出的 JS 文件中，只会包含 square() 函数的代码，而 cube() 函数的相关代码就会被剔除掉。
UglifyJS
UglifyJS 是一个 JavaScript 的压缩和混淆工具，可以帮助我们剔除 JavaScript 中的空间和注释，减小文件大小。在 Webpack 中，我们可以通过 webpack-parallel-uglify-plugin 插件来实现 UglifyJS 操作。
按需加载
按需加载是指，当一个应用过大时，webpack 可以自动将模块进行拆分，形成多个小模块，然后在需要的时候进行加载。这样可以提高应用的首屏加载速度，并且减少了整个应用的资源占用。
适用于大型应用开发。
splitChunks
splitChunks 是 webpack 4 内置的一个插件，专门用于提取公共的 js 资源，减少冗余，避免代码重复造成的加载和解析时间浪费。
在 webpack 的配置文件中配置：
------------- -
------------ -
------- ------
-------- ------
-------- --
---------- --
----------------- --
------------------- --
----------------------- ----
----- -----
------------ -
-------- -
----- -------------------------
--------- ---
--
-------- -
---------- --
--------- ----
------------------- ----
-
-
-
-在配置参数中，我们可以指定 groups 缓存策略，将多个 chunks 模块中公共的部分分割成单独的 chunk 输出。这样可以有效地避免代码的冗余，提高代码块的复用率。
示例代码
本文使用了一个非常简单的 React 应用作为示例，展示 Webpack 4 的效果。您可以在这个 Github 仓库 中找到示例代码。
下图是未进行 Webpack 优化之前的项目结构：
打包生成的文件数量多达 47 个，文件总大小为 1.74MB，其中 1.1MB 占用了 JavaScript 的输出文件。
为了优化这些输出文件，我们需要先进行配置。
Webpack 配置
在 Webpack 4 的配置中，我们需要先引用一些必要的内置优化插件：
-
------------- -
---------- -
--- ----------------
------ -----
--------- -----
---------- -----
-------------- -
------- -
--------- ------
--------- ------
--
--------- -
------------- -----
-------------- -----
---------- -----
--
--
---
--
------------ -
------- ------
-------- ------
-------- --
---------- --
----------------- --
------------------- --
----------------------- ----
----- -----
------------ -
-------- -
----- -------------------------
--------- ----
-------- --- - -----
--
-------- -
---------- --
--------- ----
------------------- -----
-------- --- - -----
--
--
--
--
-其中，optimization 中的 minimizer 选项来自 webpack-parallel-uglify-plugin 插件，用于生产环境中的代码压缩和混淆。minChunks 选项指定了公共 chunk 的最小的块数。对于小于 2 个的块，我们可以使用默认配置，用于打包其他类库等文件。cacheGroups 中的 defaults 指定了默认缓存策略，我们将重复出现次数比较多的模块，当作可复用模块，优先压缩和缓存。cacheGroups 中的 vendors 用于将 node_modules 的模块打包分离开来。maxSize 指定了缓存策略的缓存最大大小，可以进行压缩和拆分。
Webpack 分析
我们使用 webpack-bundle-analyzer 对打包后的文件进行分析：
可以发现，在实际使用中，Webpack 的输出文件大小已经极大地优化了。
总结
本文围绕 Webpack 打包后的 JS 文件大小进行了讲解，并深度剖析了 Webpack 4 的优化机制。我们使用了 Tree Shaking、UglifyJS、按需加载和 splitChunks 等机制。
如果我们能够合理使用 Webpack 4 的优化机制，就可以有效地减少 JS 文件的大小。在今天的分布式和高性能化的互联网应用开发中，合理使用 Webpack 4 的优化机制是非常有必要和有益的。
最后，我们留给读者一个问题：是否为自己的应用合理配置 Webpack 4 的优化机制？
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/649a76f248841e9894759d72