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

Question

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

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

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

我以为动态导入只会在条件为真时才加载库，为什么无论如何它都由webpack加载？

Answer 1

Webpack将始终构建所有代码，除非保证变量始终为false ，例如，在使用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会意识到这一点，并且只需在同一捆绑包中一次对其进行构建，因此从动态导入中不会获得任何好处。