javascript - 动态导入被添加到 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 将使用 split chunks 插件将动态导入拆分为块https://webpack.js.org/plugins/split-chunks-plugin/

如果您fancy-modal以“非动态”方式在代码中的其他任何地方导入，webpack 将意识到这一点并在同一个包中构建一次，因此您不会从动态导入中获得任何好处。