解决 Webpack 运行速度慢的问题-JavaScript中文网-JavaScript教程资源分享门户

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

解决 Webpack 运行速度慢的问题