Webpack DefinePlugin 缓慢。有什么选择吗？答案

【问题标题】：Webpack DefinePlugin slowness. Any alternative?Webpack DefinePlugin 缓慢。有什么选择吗？
【发布时间】：2016-11-23 06:27:33
【问题描述】：

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

【问题讨论】：

标签： webpack webpack-plugin

【解决方案1】：

你必须在编译过程中执行 webpack 对 DefinePlugin 所做的事情，原因很简单，DefinePlugin 所做的事情会影响包中的实际内容。

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

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

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

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

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

【讨论】：