Webpack 是目前前端开发中最常用的打包工具之一，它可以将多个 JS/CSS 文件合并成一个文件，并且可以优化代码、压缩文件等。但是，Webpack 在打包过程中可能会出现速度慢的问题，特别是在项目日渐庞大的情况下，这个问题会愈加明显。
那么，有什么方法可以优化 Webpack 的打包速度呢？本文将详细介绍几种优化 Webpack 打包速度的方法，让你的项目更加高效地进行打包。
1. 减小启动时间
Webpack 在启动时需要读取大量文件和模块，导致启动速度比较慢。减小启动时间是优化速度的关键。以下是几种常用的减少启动时间的方法：
1.1 将 Webpack、Node.js、操作系统更新到最新版本
每个版本的 Webpack、Node.js 以及操作系统都会做出一些更改来提高性能。及时更新可以获得更好的性能。
1.2 使用 dllPlugin 插件
DllPlugin 插件可用于编译一些稳定的第三方库，这样在每次打包的时候，Webpack 将不再需要编译那些库。在配合parallel-webpack使用时能起到事半功倍的效果。
1.3 合理的模块解析
在 Webpack 配置文件中配置 module 字段的 lookupPaths 属性，可以让 Webpack 在resolve.modules中查找到的路径之外再查找一些路径。
-- -------------------- ---- ------- -------- - -- -------- ------- ------------ ----------- -- -------- - -- ----------------------- --------------- -- - ------------ - ----------------------- ---------------- ----------------------- ------------- - -展开代码
在 lookupPaths 中的路径需要加入环境变量。此时候很可能发现环境变量被忽略了，那是因为 Webpack 会优先使用 node_modules 下面的模块。这个时候我们可以引入模块分离插件(ModuleFederationPlugin)，由它来决策从哪里查找远程依赖。
2. 减小编译时间
在进行 Webpack 打包时，编译时间是非常重要的一部分。以下是几种优化编译时间的方法：
2.1 使用 babel-preset-env 取代 babel-preset-es2015
babel-preset-env 可以取代 babel-preset-es2015，它只会打包出你的浏览器不支持的 ECMAScript 特性，这样可以避免不必要的编译。此外，在 presets 中加入了 useBuiltIns: "usage" 和 corejs: 3 这两个设置，即可自动引入 polyfill。
2.2 拆分 vendor 公共代码
如果你的项目使用了一些第三方依赖，可以将这些依赖拆分成 vendor 公共代码，避免打包时重复编译。
2.3 使用 HappyPack 加快构建速度
HappyPack 插件可以将代码分发给多个 worker 线程进行编译处理，从而提高打包速度。在 webpack5 中 HappyPack 已经不再被支持，但 jest 的 parallel 配置文件启发了我们并行地处理webpack，假如我们有多个entry性质的模块单独编译，会极大地缩短编译时间。
-- -------------------- ---- ------- ----- --- - ----------------------- -- ------- ----- ------- - ------- -------- ------ ---------------------- -- - ------------------------------------- --------------------------------------- ------ - ----- ------------- -- ------------------ --------------- ----------------------- --------------------------------- - ------ -- -- -- -- ------- ----- ---- - ----------- -- -------- - --- ------------------------ -------------- ------ --------- ------ ---------- ---- --- --- ---------------------------- ----------- - ----------- ----------------------- -------------------------------------- -------- ---------- -- ---------------------------- ----- --------------------- ----- ------ ------------------------- --------- ----------------------- ------------------------------------- -- ---------------------------- - -- - - --- ---------------------------------------- ---------- - -- -- ---------------- --展开代码
3. 其他优化方法
3.1 使用外部 CDN
在解析大多数资源时，使用外部 CDN 可以大幅提高打包速度，减少网络请求时间。当然，这在一定程度上会影响性能。需要根据实际情况进行选择。
3.2 缓存
缓存响应接可以避免重复连接到远程服务器或再次编译文件。例如在资源文件的 URL 上添加 hash 值，这样每当资源文件更新时，hash 值也会随之更新，从而保证浏览器缓存失效，减少请求时间。
结语
以上就是优化 Webpack 打包速度的几种方法，需要根据实际情况进行选择，不要盲目跟风。从长期来看，良好的代码管理和开发习惯，可以帮助项目更好地运行，避免追根溯底的优化问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c918dae46428fe9e01b799
