reactjs - 使用react-loadable实现组件延迟加载的动态路径导入

Question

我正在使用 create-react-app 创建一个应用程序并使用 react-loadable 延迟加载组件。

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

代码:

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

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

如果我将路径字符串放在路径变量的位置(例如 import('./pages/Home'))并调用它起作用的函数。但是当我像上面的代码一样使用它时，Loader 将加载但它不会继续加载组件了。如果我在导入中使用变量，为什么它不起作用？

Answer 1

找到答案 here

“要让 Webpack 处理导入，它至少需要能够粗略地猜测 import() 意味着引用什么。”

原来你的路径不能太匿名。我猜 Webpack 已经堆叠得很深，可以自信地知道我正在导入什么。