动态导入被添加到 webpack 包答案

【问题标题】：Dynamic import being added to webpack bundle动态导入被添加到 webpack 包
【发布时间】：2019-09-28 17:44:10
【问题描述】：

我想在某种条件下导入一个模块，所以我是通过动态导入语法来实现的：

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

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

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

【问题讨论】：

【解决方案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 将意识到这一点并在同一个包中构建一次，因此您不会从动态导入中获得任何好处.

【讨论】：

我只在 dev 上需要这个模式，这就是为什么我不希望模块出现在生产包中。 showModal 来自一个配置文件，它在 prod 上总是设置为 false。我不能使用process.env.NODE_ENV，因为模式是在运行时而不是构建时执行的。
如果它在运行时执行，那么它将始终在构建输出中，但是它应该在它自己的块中，而不是在主包中。所以在运行时它根本不应该加载 js。是它仍在加载块的问题，还是你只得到一个输出js文件？
是的，问题在于它是输出文件的一部分。你知道可能是什么原因吗？
您是否在生产模式下运行构建 (NODE_ENV=production)？构建输出了多少个js文件？您是否定义了自己的 webpack 配置，或者您是否使用了类似 create-react-app 的东西？