条件导入仍然是Webpack中bundle的一部分

时间:2018-03-06 17:02:37

标签: javascript webpack

我正在尝试有条件地加载模块并且条件似乎有效但是当条件为false时,webpack仍然使条件模块成为bundle的一部分,这里是导入代码:

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

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

即使该值未“打开”,它仍然需要该模块。我使用日志行对此进行了测试,并在打开和关闭时显示正确的日志行。

我正在使用Webpack define插件来设置变量。执行上述操作的主要原因是为了使捆绑包大小保持较小而且似乎没有这样做。

2 个答案:

答案 0 :(得分:2)

(代表作者提问回答)

所以上面的代码几乎是正确的,我需要删除表达式,只需使用if(process.env.FEAT_SUPPORT),其中FEAT_SUPPORT替换为' true'或者' false'

答案 1 :(得分:1)

设计中的

require可以在代码中的任何位置调用,因此这将在bundle中添加一个新模块。 如果你想将需要拆分成一个单独的文件,你应该使用require.ensure方法,那个webpack会把它拆分出来。

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

请参阅webpack文档中的dynamic-imports chapter