Dll Bundle Splitting

使用 webpack 的一个很棒的特性是能够利用 webpack.DllPlugin 插件。如果你不熟悉 webpack.DllPlugin 插件，请务必阅读它的 文档，以便更好地理解它试图解决的问题。简而言之，这可以用来 显著提高 构建时间性能。

通过自定义配置，electron-webpack 提供了一个地方来定义你想为其创建单独 bundle 的特定包。你可以将此功能视为将所有 vendor 库捆绑在一起的一种方式。

一旦你定义了你的模块，你可以简单地运行 electron-webpack dll 来生成一个 vendor bundle，它将在你的最终编译中被引用。让我们逐步了解。

定义你的模块

这里我们在 package.json 中定义我们的模块。如果你愿意，你也可以为你的配置创建一个单独的文件 (更多信息)。

{
  "electronWebpack": {
    "renderer": {
      "dll": [
        "fooModule",
        "barModule"
      ]
    }
  }
}

创建 vendor bundle

一旦你选择了你选定的模块，你可以运行以下命令来创建你的 vendor bundle。

electron-webpack dll

如果你计划经常使用它，为这个命令创建一个 package.json 脚本可能是有益的。

{
  "scripts": {
    "compile:dll": "electron-webpack dll"
  }
}

最终说明

既然你的 vendor bundle 已经创建，你可以继续进行标准的 electron-webpack 编译过程。

请注意，只有当你显式运行 electron-webpack dll 时，才会创建 vendor bundle。在大多数情况下，你可能只需要运行一次。但是，当你添加/删除模块，甚至更新这些模块时，你需要重新运行命令以创建一个更新的 bundle。

使用 postinstall 钩子

使用 Dll bundle splitting 时，一种常见的做法是定义一个 postinstall 命令，以便在每次安装新依赖项时创建 vendor bundle。这可以帮助确保一切都是最新的，这样你就不必手动运行它了。

package.json

{
  "scripts": {
    "postinstall": "electron-webpack dll"
  }
}