前言
如今 Webpack 已经成为了前端开发中最重要的工具之一，尤其是在 React、Vue、Angular 等框架中的应用更加广泛，而 Webpack 所打包的 JS 文件大小以及打包速度也成为了工程优化中的重要一环。本篇文章将针对 React 工程进行 Webpack 4 的打包优化，让开发者更好地掌握 Webpack 打包优化的方法论和实现技巧。
打包速度优化
在 React 工程中，一次完整的打包过程大概分为以下几步：
- 解析模块的依赖关系
- 编译模块，处理模块之间的依赖关系
- 输出编译后的 JS 文件
考虑到 Webpack 的工作原理，我们可以从以下几个方面进行优化：
优化 Module 解析速度
Webpack 解析模块的速度非常重要，因为解析模块涉及到大量的文件 I/O 操作，速度的提升可以明显减少打包的时间。而我们可以从以下几个方面进行优化：
1. 使用高速文件系统
不同的文件系统在文件读写速度方面有很大的差别，比如在 Mac 上 APFS 文件系统的读写速度比 HFS+ 要快。所以我们可以优先使用速度更快的文件系统来加快文件读写的速度。
2. 缩小文件搜索范围
Webpack 解析模块时，会按照一定的规则搜索模块目录，所以这个搜索范围的大小也会直接影响到解析的速度。我们可以通过以下几种方式来缩小搜索范围：
- 使用
resolve.modules、resolve.alias配置项指定模块查找路径和别名，来缩小搜索范围； - 禁用不必要的文件搜索，比如将
resolve.extensions配置项的值缩小到项目中实际使用的几种文件格式； - 避免使用通配符来查找文件，因为通配符会涉及到更多的文件搜索操作。
优化编译速度
在 Webpack 编译过程中，大部分的时间都使用在代码的解析和转换之中，所以优化编译速度可以使得 Webpack 打包速度有明显提升。
1. 开启多线程和缓存
Webpack 4 版本已经内置了基于 worker 的多进程编译系统，并且开启缓存功能可以使得 Webpack 在多次编译时不需要对所有文件进行重新编译。你可以通过以下代码来开启多线程和缓存功能：
-- -------------------- ---- -------
-- -----------------
----- ------------ - -------------------------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- ----------------
-------- -
-------- --------------------------- - - -- - --- ------ ------ ---
--
--
--------------
-
-
-
--
------ ----
--2. 使用 Babel 编译
Babel 可以将高级语法的代码转换为 ES5 语法的代码，这个转换过程可以让 Webpack 将编译更多的工作交给 Babel，从而减少 Webpack 的编译时间，具体的代码如下：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- --------
---- --------------
-
-
-
--3. 缩小模块的依赖链
Webpack 同时会处理许多不必要的代码，比如多余的依赖关系，这些代码不但会使得 Webpack 的编译速度变慢，还会增加打包后 JS 文件的大小。为了避免这个问题，我们可以通过以下几种方式来缩小模块的依赖链：
- 遵循单一职责原则，并将不相关的代码分离成不同的模块，减少模块间的依赖；
- 避免滥用大的第三方库，可以使用 lodash、ramda 等库中更为轻量级的函数，减小依赖链的长度；
- 缩小提取公共依赖的范围。
总结
优化 Webpack 的打包速度非常重要，可以减少开发时间以及用户体验的等待时间，并且可以提高工程的可维护性。本篇文章介绍了优化 Webpack 打包速度的基本思路和实现方法，希望能帮助到需要优化 Webpack 打包速度的读者。
参考文献
- The cost of JavaScript in 2019
- Webpack Optimization Techniques You Can Use Today
- 速度提升30%！Webpack 打包优化策略
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d2eff64c75763f29936f27