条件导入仍然是 Webpack 中捆绑包的一部分答案

【问题标题】：Conditional Import still part of bundle in Webpack条件导入仍然是 Webpack 中捆绑包的一部分
【发布时间】：2018-03-30 06:33:44
【问题描述】：

我正在尝试有条件地加载一个模块，并且条件似乎有效，但是当条件为 false 时，webpack 仍然将条件模块作为捆绑包的一部分，这是导入代码：

if (process.env.FEAT_SUPPORT === 'on') {
  require('feature');
  console.log('Enabled')

} else {
  console.log('disabled')
}

即使值不是'on'，它仍然需要模块。我使用日志行对此进行了测试，并且在打开和关闭时会出现正确的日志行。

我正在使用 Webpack 定义插件来设置变量。这样做的主要原因是为了保持包的大小很小，而且似乎没有这样做。

【问题讨论】：

【解决方案1】：

（代表问题作者发布答案）。

所以上面的代码几乎是正确的，我需要删除表达式并简单地使用 if(process.env.FEAT_SUPPORT) 其中 FEAT_SUPPORT 被替换为“真”或“假”

【讨论】：

【解决方案2】：

require 按照设计可以在代码中的任何位置调用，因此这将在包中添加一个新模块。如果你想将该 require 拆分成一个单独的文件，你应该使用 require.ensure 方法，该 webpack 会为你拆分它。

您也可以使用新的 ES6 import() 语法，这将产生相同的结果。

请阅读：dynamic-imports chapter 在 webpack 文档中。

【讨论】：

所以我想要的仍然是一个单独的包，而不是拆分成任何新文件。我希望我的构建能够生成包含所需模块的包，或者根据构建时间标志将其排除。
在这种情况下，你应该使用DefinePlugin，这会将你的If更改为false / true，然后结合UglifyJsPlugin，它将在生产模式下被删除。
这就是我正在做的事情，if 条件确实变为 false，但捆绑包大小没有改变。我使用文档说它使用 UglifyJsPlugin 的 webpack -p 构建，您是否建议我单独添加 Uglify？
不用了，插件就够了，你可以在压缩包里搜索一下，看看definePlugin是否有效。