Question

我正在使用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'

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

Answer 1

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

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

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

添加自定义函数并承诺对React.lazy造成错误

1 个答案: