我正在使用 create-react-app 创建一个应用程序，并使用 react-loadable 延迟加载组件。
我想要做的是为 loader 对象或 react-loadble module的 Loadable 函数导入动态路径。
代码：
const LoadableComponent = path =>
Loadable({
loader: () => import(`${path}`),
loading: Loader,
})
const Home = LoadableComponent('./../../pages/Home')
const User = LoadableComponent('./../../pages/User')
如果我将路径字符串放在路径变量的位置（例如 import('./pages/Home')）并调用它工作的函数。但是当我像上面的代码一样使用它时，Loader 将加载但它不会再继续加载组件。如果我在导入中使用变量，为什么它不起作用？
据我所知，捆绑器（Webpack）需要能够预先处理文件路径。
我的问题是为什么需要它？仅仅写作有什么不好的地方吗？
const Home = Loadable({
loader: () => import('./pages/Home'),
loading: Loader,
})
const User = Loadable({
loader: () => import('./pages/User'),
loading: Loader,
})
加分点：看看最近在 16.6 中发布的新 React lazyAPI。链接页面也有一些关于代码拆分的好信息。
为了简化配置延迟加载，解决方案如下：
import React, {Component, lazy, Suspense} from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from "react-router-dom";
let routers={
'/about': import('./pages/about'),
'/contact': import('./pages/contact'),
}
class Content() extends Component{
render(){
return (<Switch>
{Object.keys(this.props.routers).map((path, idx) => {
let Child = lazy(()=>this.props.routers[path])
return (
<Route path={path} key={idx}>
<Suspense fallback={<div>Loading...</div>}>
<Child></Child>
</Suspense>
</Route>)
})}
</Switch>
}
}
ReactDOM.render(
(
<BrowserRouter>
<div>
<ul>
<li><Link to="/about"> About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
<Content routers={config.routers}></Content>
</div>
</BrowserRouter>
),
document.getElementById('root') as HTMLElement
)