'Custom lazy import function is occured all file will be chunked under import path
In React Project, I was trying to dynamic lazy load with custom functions.
Why Custom function will be make all chunked files in container directory even if just declared not using it?
if I applied my custom lazyImport function in other code, results will be same. Doesn't care about the function is used that is enough just declared.
const lazyImport = (containerName: string) => lazy(() => import(`containers/${containerName}`));
const assignRouter: AssignRoute[] = Object.keys(routerMeta).map((componentKey: string) => {
const propsArr: propsArrTypes = assignRouteArrayProps(routerMeta[componentKey])
return {
Comp: lazyImport(componentKey),
propsArr
}
})
const assignRoute = (Comp: ComponentType<any>, props: RouteMetaProps) => {
return <Route key={props.path} element={<Comp />} {...props} />
}
const CommonRouter: FunctionComponent<ICustomRotuerProps> = (props) => {
return <Suspense fallback={<FlexCenter>
<Spin />
</FlexCenter>}>
<Routes>
{assignRouter.map(({ Comp, propsArr }: AssignRoute) => {
return assignRoute(Comp, (propsArr as RouteMetaType) as RouteMetaProps)
}
})}
</Routes>
</Suspense>;
};
export default CommonRouter
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

