Why does react-loadable cause the project to refresh too slowly when the file is changed?

I have a project that says so

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>

it takes about 30 seconds to modify the file to refresh the page in this way, but it takes only 5 seconds to change it to the following way

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>

in the actual project, routes is a long array
, but I don"t understand why the two writing methods cause this gap. I understand that it should be the same. Does webpack compile differently to treat the two writing methods?

I don"t want to import components one by one


do not loop import external resources, and do not call the interface.
js is single-threaded!


Why not parallel?

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}/>;
  }
});
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b323bf-2be0f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b323bf-2be0f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?