webpack 优化: DLLPlugin 与 HappyPack-JavaScript中文网-JavaScript教程资源分享门户

随着前端项目越来越复杂，模块数量也越来越庞大，前端性能的优化变得越来越重要。Webpack 是目前广泛使用的前端打包工具，它通过打包将多个模块组合成单个文件，从而提高应用的性能。

然而，在实际应用中，Webpack 运行速度和构建时间也成为了一个重要问题，特别是在大型项目中。因此，一些优化技巧和工具也应运而生。在本文中，我们将介绍两种非常流行的 Webpack 优化工具：DLLPlugin 和 HappyPack。

DLLPlugin

DLLPlugin 是 Webpack 内置的插件，它可以将公共的模块打包成单独的文件，这些模块可以被多个入口共享。DLLPlugin 可以显著提高构建速度，因为只有在公共模块变化时才需要重新构建，其它模块可以被缓存起来。

DLLPlugin 打包的流程如下所示：

首先在 webpack.config.js 中配置一个专门的文件，例如 webpack.dll.config.js，用于打包公共模块。

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

在 vendor 入口中定义了需要打包的公共模块，例如 react 和 react-dom。同时，输出路径指定为 dist 目录，文件名为 vendor.dll.js，定义了这个文件的库名称为 vendor_lib。

执行 webpack --config webpack.dll.config.js 将公共模块打包到 vendor.dll.js 文件中，同时生成一个 vendor-manifest.json 文件用于提供给后续的应用程序使用。
```
{
  "name": "vendor_lib",
  "content": {
    "react": "node_modules/react/dist/react.min.js",
    "react-dom": "node_modules/react-dom/dist/react-dom.min.js"
  }
}
```
vendor-manifest.json 文件中定义了 vendor.dll.js 文件中公共模块的映射关系。
在应用程序的 webpack.config.js 中配置添加引用公共模块的插件，使用 webpack.DllReferencePlugin 插件。
```
plugins: [
  new webpack.DllReferencePlugin({
    manifest: path.resolve(__dirname, 'dist', 'vendor-manifest.json')
  })
]
```
manifest 选项指定公共模块的映射关系文件。

此时，Webpack 会使用 DLLPlugin 打包好的公共模块文件，从而减少了重复打包的时间。

HappyPack

HappyPack 是另一个 Webpack 优化工具，它的作用是将模块的构建工作分解给多个子进程并行处理，从而加速构建速度。

使用 HappyPack 需要先安装 happypack 和 happypack-loader 两个包。

首先在 webpack.config.js 中添加 HappyPack 的插件。

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

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

使用 new HappyPack() 生成一个 HappyPack 实例，指定 id 为 js，threads 表示子进程的数量，这里设置为 4，loaders 表示要使用的 loader。

定义需要使用多线程 HappyPack 的 loader。
```
const jsLoader = {
  test: /\.(js|jsx)$/,
  use: [
    {
      loader: 'happypack/loader?id=js'
    }
  ]
};
```
这里将 babel-loader 替换为使用 HappyPack 的 happypack/loader，并指定使用的 id 为 js。

通过 HappyPack，Webpack 根据每个子进程的 CPU 资源自动划分工作负载，并行处理模块构建任务，提高了整体构建速度。

总结

通过使用 DLLPlugin 和 HappyPack 这两个 Webpack 优化工具，可以显著提高前端项目的构建速度和性能，特别是在大型项目中使用时，收益更加明显。

完整示例代码和说明可参考 Github 仓库。

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