I am trying to import components based on variable. My point is to import just the one I want to reduce bundle size.

First Case:

const componentMapONE = {
  'customers': dynamic(() => import('../../../pages/customers'), {
              loading: () => <FallbackSpinner />,
              ssr: false
            }),
 'brands': dynamic(() => import('../../../pages/brands'), {
              loading: () => <FallbackSpinner />,
              ssr: false
            }),  
// .... others hardcoded manually, or generated with logic doesn't matter same result
};

const importPromises = (componentNames: string[]) => {
  return componentNames.map(name => {
    const loadComponent = componentMap[name];
    if (!loadComponent) {
      throw new Error(`Component ${name} not found`);
    }
    return loadComponent;
  });
};

rest here:

https://stackoverflow.com/questions/78211311/next-js-import-bundle-size