Estoy tratando de entender cómo funcionan estas cosas / cómo pensar sobre esto. Digamos que tengo estas 2 importaciones en mi proyecto next.js:

 import components, { MDXWrapper } from '@/components/MDXComponents';

¿Ayudaría refactorizarlo dinámicamente así con solo uno de ellos? :

 import dynamic from 'next/dynamic'; import { MDXWrapper } from '@/components/MDXComponents'; const components = dynamic(() => import('@/components/MDXComponents'));

¿O esto no ayudará en absoluto al tamaño del paquete / carga de la página, ya que MDXWrapper todavía se importa de la manera anterior? ¿Cómo debo pensar en esto? ¿Es el nivel del componente lo que cuenta aquí o es el nivel del paquete en el que debería estar pensando? Hará import { MDXWrapper } from '@/components/MDXComponents'; ¿Sigue importando todo el archivo de todos modos, maldiciendo mi importación dinámica?