'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.

enter image description here

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