向 React.lazy 添加自定义函数和承诺导致错误答案

【问题标题】：Adding custom function and promise to React.lazy causing error向 React.lazy 添加自定义函数和承诺导致错误
【发布时间】：2019-01-30 19:31:10
【问题描述】：

我正在使用React.lazy 来执行route-based code splitting。此外，我添加了here 所述的最小延迟。延迟的目的是在每次延迟加载时显示加载动画的最短时间。

当我将每条路线设置如下时，一切正常：

const ExampleComponent = React.lazy(() => 
  Promise.all([
    import('./ExampleRoute'),
    new Promise(resolve => setTimeout(resolve, MIN_DELAY))
  ])
  .then(([moduleExports]) => moduleExports));

但是，当我尝试将我的承诺转移到一个函数时，一切都会中断：

const lazyPromise = (route) =>
  Promise.all([
    import(route),
    new Promise(resolve => setTimeout(resolve, MIN_DELAY))
  ])
  .then(([moduleExports]) => moduleExports);

const ExampleComponent = React.lazy(() => lazyPromise('./ExampleRoute'));

我得到的错误：找不到模块'./ExampleRoute'

我在这里缺少什么？任何帮助将不胜感激。谢谢！

【问题讨论】：

Webpack 没有配置为代码拆分。它不知道 ExampleRoute 需要包含在包中。见webpack.js.org/guides/code-splitting/#dynamic-imports
您不能将变量传递给import。模块捆绑器无法确定在捆绑时要包含哪个模块，因为该变量值仅在运行时可用。
啊，我明白了。这就说得通了。谢谢你们！

标签： reactjs es6-promise code-splitting

【解决方案1】：

我正在回答我自己的问题，以帮助将来遇到此问题的任何人。此答案详细说明了上述 estus 和 Prakash Sharma 的 cmets。

webpack 必须是静态可构建的，并且不支持使用任何路径变量including query strings。如果值在运行时之前不可用，webpack 将无法看到它。

有关webpack 如何处理代码拆分的更多信息，请访问here。

【讨论】：