获取pages目录结构动态构造路由

const req = require.context('@/pages', true, __AUTO_ROUTER_REG__, 'lazy')

路由组件都动态导入，路由的component 设置为Loadable({ loader, loading: Loading })

• loading：自定义的加载提示组件
• loader 的签名为

1
Promise<React.ComponentType<Props> | { default: React.ComponentType<Props> }>

借助req可以轻松实现这一点() => Promise.resolve(req(key)) ，key 是req.keys() 的项。

Loadable 是一个高阶组件，它会返回一个新的组件，此组件内部会调用loader 加载异步导入的组件(import(xxx))。在加载完成前，会展示loading 对应的组件。

Loadable 来自'react-loadable' 库。 也可以使用React.lazy + Suspense 来实现：

1
// React 官方方案示例
2
const LazyComponent = React.lazy(() => import('./HeavyComponent'));
3

4
function App() {
5
  return (
6
    <Suspense fallback={<Loading />}>
7
      <LazyComponent />
8
    </Suspense>
9
  );
10
}