Webpack4 构建性能优化指南-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一款常用的前端构建工具，它可以将多个 JavaScript 模块打包成单个文件，用于在浏览器中使用。在实际开发中，Webpack 构建速度往往会影响项目的开发、打包和部署时间。本篇文章将探讨 Webpack4 构建性能的优化方法，并通过示例代码详细讲解。

1. 合理配置 Webpack4

Webpack4 官方提供的默认配置不一定适用于你的项目。在一些情况下，我们需要重新配置 Webpack4，以满足项目的需求和要求。以下是一些优化 Webpack 构建的方法：

1.1 删除不必要的插件

在原有 Webpack4 的配置基础上，我们需要剔除那些无用的插件，并统计每个插件的执行时间。如下：

-- -------------------- ---- -------
----- ------------------ - ----------------------------------------
----- --- - --- ---------------------
----- ------------- - ----------
  ------------------
  -------- -
    --- -------------------- -- ---
    --- -------------------- -- ---
    --- -------------------- -- --
    ---
  -
---

1.2 添加缓存

Webpack4 默认具有缓存功能，因此让 Webpack 保持缓存是非常重要的，特别是你有大量长时间经常运行的编译或者打包任务时。

module.exports = {
  mode: "production",
  cache: true,
  ...
}

1.3 确认 `devtool` 配置

devtool 配置会影响构建速度和包体积。通常，webpack 默认设置为 devtool: 'eval'，但这往往伴随着慢慢的构建时间和较高的资源消耗。在生产模式下，建议设置为 devtool: 'source-map'。

module.exports = {
 mode: "production",
 + devtool: "source-map",
}

1.4 尽量减少入口文件数

最佳的情况是只有一个入口文件，但是在实际开发中往往有多个入口文件。多入口文件一定程度上降低了编码的效率（比如需要同时修改多个文件），同时也降低了构建的速度。

-- -------------------- ---- -------
-------------- - -
  ----- -------------
  -- ----
- ------ -
-   ------ -----------------
-   ------ -----------------
-   ------ ----------------
- -
-

1.5 使用 Webpack 对象或者全局变量

当你使用 BootStrap 或者 jQuery 之类的库时，在你的页面上通过 CDN 引入它们通常是更简单和更容易的，因为这样可以直接远程使用。但这也代表着，imports 和 requires 中不需要在引入这些库。这可以让 Webpack 在启动时绕过处理这些资源的过程。

module.exports = {
  mode: "production",
  externals: {
+   jquery: "jQuery",
+   bootstrap: "bootstrap"
  }
}

使用以上方法可以明显加快 Webpack4 构建的速度，让你的代码更易于维护、开发和扩展。

2. 使用并行-webpack

并行-webpack 是一个加快 Webpack 构建速度的工具。基于子进程实现并行 webpack 构建能更好的利用多核 CPU 的性能，从而提高构建速度。

2.1 安装

npm i parallel-webpack -D

2.2 配置

-- -------------------- ---- -------
-------------- - -
  -- ----------
-  ------------ --
  -------- -
    -- ----- ------------------
-   --- ----------------------
-     --------- ----------
-     --------- -----------------------------
-   ---
-   --- --------------------------
-     --------------- ---
-   ---
  -
--

通过以上的配置，我们可以轻松地使用并行-webpack 加速 Webpack4 的构建速度，提高我们开发的效率。

结论

本文中，我们详细介绍了 Webpack4 中构建性能的优化方法，包括合理配置 Webpack4、使用并行-webpack 等。这些优化方法不仅能够优化我们项目的构建速度，也让我们的开发工作更加顺畅，工作效率更高。希望这篇文章能够为你提供有价值的指导和参考。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66f27993a44b36ee57660850

Webpack4 构建性能优化指南