添加自定义函数并承诺 React.lazy 导致错误

Question

我正在使用 React.lazy 来完成 route-based code splitting. Additionally, I'm adding a minimum delay as described 。延迟的目的是在每次延迟加载时显示最短时间的加载动画。

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

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'

我在这里错过了什么？任何帮助将不胜感激。谢谢！

Answer 1

我正在回答我自己的问题，以帮助将来遇到此问题的任何人。这个答案详细阐述了上面 estus 和 Prakash Sharma 的评论。

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

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

添加自定义函数并承诺 React.lazy 导致错误

Adding custom function and promise to React.lazy causing error

reactjs

es6-promise

code-splitting