Webpack 的 DefinePlugin 速度慢，有替代方案吗？

Question

我们使用Webpack DefinePlugin为不同的渲染模式生成输出束。因此，例如，我们的webpack配置将返回：

  [{
    entry: {
      mode1: "./input.es6",
    },
    output: {
      path: path.join(__dirname, 'dist'),
      filename: "[name]-bundle.js",
    },
    plugins: [
      new webpack.DefinePlugin({
        __RENDER_MODE__: 'mode1',
      }))
    ]
  },{
    entry: {
      mode2: "./input.es6",
    },
    output: {
      path: path.join(__dirname, 'dist'),
      filename: "[name]-bundle.js",
    },
    plugins: [
      new webpack.DefinePlugin({
        __RENDER_MODE__: 'mode2',
      }))
    ]
  }]

在代码中，我们将执行

if (__RENDER_MODE__ === 'mode1') {
  require('jquery-ui')
}

if (__RENDER_MODE__ === 'mode2') {
  require('other-lib')
}

这样可以生成更适合每种渲染模式的捆绑包。然而，随着我们的渲染模式增加，我们正在运行多个webpack编译，大大降低了编译速度。我有一些解决这个问题的想法，希望听到更多的意见：

1. 是否有一种方法可以使用1个单独的webpack编译，并在编译完成后进行定义插件替换?因此，我们不是在编译时使用DefinePlugin替换变量，而是只编译一次，然后在之后进行替换。
2. 或者，是否有一种方法可以对每个条目进行定义插件配置?每个条目都会有单独的DefinePlugin配置。

- Dafeng

Answer 1

你需要在编译过程中执行webpack使用DefinePlugin的操作，因为DefinePlugin的操作会影响实际捆绑包中的内容。

如果你的代码中有以下内容：

if (__RENDER_MODE__ === 'mode1') {
  require('someLibrary').render();
}

webpack会智能地看到当条件不成立时IF总是falsey，只有在可以真正使用的情况下才会将someLibrary添加到您的捆绑包中。在缩小步骤之前使用DefinePlugin也很重要，因为缩小器将删除死代码（与示例中相同）。

所以，简而言之，没有办法像DefinePlugin那样在以后的某个时候避免分别编译两个捆绑包。

对于您的第二个问题，不，无法针对每个入口设置单独的DefinePlugin，原因很简单，因为两个入口可能具有共同的模块，这将导致冲突。唯一的方法是进行两个单独的构建，就像您已经做的那样。

- Ambroos