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