动态导入已添加到webpack捆绑包中

Question

我想在特定条件下导入模块，因此我正在通过动态导入语法来实现它：

  if (showModal) {
    import('fancy-modal').then(({ initModal }) => {
      initModal();
    });
  }

这可行，但是无论showModal的值是多少，它都会将“ fancy-modal”库代码添加到webpack捆绑包中。

我认为动态导入只会在条件为真的情况下才加载库，为什么无论如何它都将由webpack加载？

Answer 1

除非保证变量始终为false，例如，否则Webpack将始终构建所有代码。使用define插件并使用if(process.env.NODE_ENV !== 'production'){ // do some dev only stuff}时。

默认情况下，Webpack 4将使用拆分块插件https://webpack.js.org/plugins/split-chunks-plugin/

将动态导入拆分为块

如果您以“非动态”方式在代码中的其他任何位置导入了fancy-modal，则webpack将会意识到这一点，并且只需将其一次构建在同一捆绑中即可，因此您将无法从中受益动态导入。