为什么react-loadable导致项目更改文件时刷新巨慢?

Question

我有个项目这么写的

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秒，如果改成下面这种写法只要5秒

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={'/applyFillIn'} component={applyFillIn} />
          <Route  path={'/processMonitorOffline'} component={processMonitorOffline} />
        </Content>
      </CoreLayout>
    )
  }} />
</Switch>

实际项目中routes是个很长的数组
但我不明白两种写法为什么会造成这种差距，我理解应该是一样的，难道webpack编译的时候区分对待这两种写法吗？

我不想一个个地import组件

Answer 1

不要循环中import外部资源，也不要调用接口。
js是单线程！！！！！

Answer 2

为什么不并行呢？

Loadable.Map({
  loader: {
    Bar: () => import('./Bar'),
    i18n: () => fetch('./i18n/bar.json').then(res => res.json()),
  },
  render(loaded, props) {
    let Bar = loaded.Bar.default;
    let i18n = loaded.i18n;
    return <Bar {...props} i18n={i18n}/>;
  }
});