Webpack 是一个常用的前端打包工具，用于将多个文件打包成为一个或多个 JavaScript 文件。在实际开发中，因为项目的规模、开发过程中涉及到的插件数量、代码质量等差异，Webpack 打包速度和文件大小等方面表现也会不同。因此，进一步优化 Webpack 的打包速度和文件大小，是前端开发过程中不可避免的课题。本文将介绍 Webpack 打包进度和速度控制方面的一些技巧和实践，帮助读者更好地理解和使用 Webpack。
了解 Webpack 打包进度
当我们执行 Webpack 打包项目时，我们会看到打包数据输出的进度条，如下：
上图中的进度条是一个非常简单的示例，实际项目中的进度条可能更加复杂。在使用 Webpack 打包时，了解 Webpack 打包进度相关的信息对于我们调试和优化打包速度非常有帮助。
Webpack 打包进度信息包括以下内容：
构建阶段
Webpack 打包分为多个阶段，通常包括以下几个阶段：
解析模块：Webpack 从入口开始递归解析所有依赖模块。
模块转换：Webpack 根据模块的类型，选择合适的模块转换器。
依赖解析：Webpack 将模块之间的依赖关系处理完，并生成 chunk。
代码生成：Webpack 根据 chunk 生成打包结果。
打包过程中每个阶段的进展情况都会在终端输出中给出。
总耗时
Webpack 打包的总耗时对于我们了解项目的瓶颈和优化方向非常有帮助。在进度条的最后，Webpack 会输出总耗时的信息。
打包文件
Webpack 打包生成的文件包括以下几个部分：
modules: 模块构建信息，即把模块变成 chunk。
assets: 打包后的资源。例如，CSS、图片、TypeScript 编译生成的 JavaScript 等。
runtime: 包含运行时代码和 Webpack 运行时的基本逻辑。
在终端输出中，Webpack 会给出打包文件的生成情况和实际生成的文件大小。
提高 Webpack 打包速度
多线程打包
Webpack 默认是单线程打包的，因此会导致打包速度比较慢。可以通过thread-loader或者happyPack把 Webpack 构建的过程使用多线程处理，从而提高 Webpack 的打包速度。
以下是使用thread-loader提高 webpack 打包速度的示例代码：
-------------- - -
------- -
------ -
-
----- --------
---- -
----------------
--------------
-
-
-
-
-减少扫描范围
我们可以通过设置include和exclude选项来控制 Webpack 的打包时搜索文件的范围，从而减少打包的时间。如果设置include选项，则只搜索指定的目录；如果设置exclude选项，则搜索除了指定目录外的所有文件。
-------------- - -
------- -
------ -
-
----- ----------
-------- -
----------------------- ------
--
------- --------------
--
-
----- ---------
-------- ----------------------- ------------------
---- -
---------------
------------
-
-
-
-
-动态链接库
构建一个动态链接库（DLL）并使用它可以高效地提高打包速度。现代浏览器大都支持 HTTP/2，通过预加载和并行下载，DLL 可以优化页面渲染的速度，同时提高代码复用性。
以下是设置动态链接库的示例代码：
-------------- - -
------ -
------ --------- -------------
------- ----------
--
------- -
--------- ----------------
----- -------------------- -------
-------- ------------
--
-------- -
--- -------------------
----- -------------
----- -------------------- ---------------------------
--
-
-上述代码会生成两个库文件，分别是react_dll.js和lodash_dll.js。在 webpack.config.js 中使用 DllReferencePlugin 即可。这样，所有相关资源只会被打包一次，我们在开发过程中就可以快速构建项目并且向浏览器提供一个独立的 CDN 站点。
按需加载
Webpack 支持代码分离，可以把一些非必要的代码拆分并异步加载，这样可以减少打包文件的大小。Webpack 有多种配置方式来实现代码分离，其中比较常用的方式是使用Dynamic imports。在使用时，可以把这个 loader 添加到babel-loader中。
下面是代码分离和按需加载的示例代码：
--------------------------------------- -- - ---------------------- ---
此示例中，我们使用了动态引入(import)来完成异步加载。在代码运行到这行时，Webpack 会异步地去加载 component.js 并返回 module 对象。
结论
本文介绍了 Webpack 打包进度和速度控制方面的一些技巧和实践。在实际项目中，我们需要根据项目的实际情况选择合适的优化策略。如果需要调试 Webpack 打包，可以使用webpack-bundle-analyzer等工具帮助我们分析打包过程中的文件大小等信息。希望这篇文章对读者在 Webpack 使用过程中能够提供一些指导。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670c8280759e058cdf32ca3e