Question

我正在一个以这种方式使用react-loadable的项目：

const routes = [{component: 'a'}, {component: 'b'}] 
routes.forEach(data => {
  data.cmp = Loadable({
  loader: () => import('./Approve/' + data.component),
  loading: () => <Loading />
 })
})

JSX就像：

<Switch>
  <Route path="/login" component={Login} />
  <Route path="/" render={(props) => {
    return (
      <CoreLayout>
        <Content>
        {routes.map(route => {

          return (
            <Route key={route.component} path={'/' + route.component} component={route.cmp} />
          )
        }) }
        </Content>
      </CoreLayout>
    )
  }} />
</Switch>

如果我在项目中更改文件，则需要30秒来重新加载页面，但是如果以这种方式写入，则重新加载时间将减少到5s

const a = Loadable({
 loader: () => import('./Approve/a'),
 loading: Loading,
});

const b = Loadable({
 loader: () => import('./Approve/b'),
 loading: Loading,
});

<Switch>
  <Route path="/login" component={Login} />
  <Route path="/" render={(props) => {
    return (
      <CoreLayout>
        <Content>
          <Route  path={'/a'} component={a} />
          <Route  path={'/b'} component={b} />
        </Content>
      </CoreLayout>
    )
  }} />
</Switch>

我不想像这样一个接一个地导入组件，但是我不知道为什么在更改任何文件时这会导致重新加载如此缓慢。是什么原因造成的，我该如何解决？（在实际情况下，路由是一个长数组）

为什么React-loadable会使重建在我的项目中如此缓慢？

0 个答案: