Webpack DefinePlugin 缓慢。还有其他选择吗？

Question

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

  [{
    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个单独的webpack编译并在编译完成后做定义插件替换？因此，我们不是在编译时让 DefinePlugin 替换变量，而是只编译一次，然后再进行替换。
或者，有没有办法为每个条目做 DefinePlugin？每个条目将有一个单独的 DefinePlugin 配置。

Answer 1

您必须在编译过程中执行 webpack 使用 DefinePlugin 执行的操作，原因很简单，因为 DefinePlugin 执行的操作会影响 bundle 中的实际内容。

如果您的代码中包含以下内容：

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

webpack 会足够聪明，当条件不为真时，IF 总是假的，并且 someLibrary 只会在实际可以使用时添加到您的包中。在缩小步骤之前使用 DefinePlugin 也很重要，因为死代码（与示例中相同）将被缩小器删除。

所以，简而言之，不，没有办法像 DefinePlugin 稍后所做的那样避免分别编译两个包。

关于你的第二个问题，不，每个条目都有一个单独的 DefinePlugin 是不可能的，原因很简单，两个条目可能有共同的模块，这会导致冲突。执行此操作的唯一方法是使用两个单独的构建，就像您已经在做的那样。

Webpack DefinePlugin 缓慢。还有其他选择吗？

Webpack DefinePlugin slowness. Any alternative?

webpack

webpack-plugin