动态路径导入，用于使用react-loadable延迟加载组件 [英] Dynamic path import for lazy loading of components using react-loadable

问题描述

我正在使用create-react-app创建一个应用，并使用react-loadable延迟加载该组件.

I am creating an app using create-react-app and lazy loading the component using react-loadable.

我想要做的是为加载器对象或react-loadble模块的Loadable函数导入动态路径.

What I want to do is import dynamic paths for the loader object or the Loadable function of react-loadble module.

代码:

const LoadableComponent = path =>
 Loadable({
  loader: () => import(`${path}`),
  loading: Loader,
 })

const Home = LoadableComponent('./../../pages/Home')
const User = LoadableComponent('./../../pages/User')

如果我将路径字符串放在路径变量的位置(例如 import('./pages/Home'))并调用它工作的函数.但是，当我使用它时，如上面的代码所示，Loader将加载，但不再继续加载该组件.如果我在import中使用变量，为什么它不起作用?

If I put the path string in the place of the path variable (Ex. import('./pages/Home')) and call the function it works. But when I use it like the code above Loader will load but it will not continue to load the component anymore. Why doesn't it work if I use the variable in import?

推荐答案

找到了答案 为了使Webpack能够处理导入，它必须至少能够粗略地猜测import()是要引用的内容."

结果证明您的路径不能太匿名.猜猜它堆积得很深，Webpack可以自信地知道我要导入的内容.

Turns out your path cannot be too anonymous. Guess it is stacked to deep for Webpack to confidently know what I am importing.

这篇关于动态路径导入，用于使用react-loadable延迟加载组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！