Динамический и нединамический импорт различных компонентов из одной и той же библиотеки? [Next.JS]

#javascript #reactjs #next.js

Вопрос:

Я пытаюсь понять, как все это работает / как об этом думать. Скажем, у меня есть эти 2 импорта в моем next.js проект:

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

Поможет ли это динамически реорганизовать его, например, только с одним из них? :

 import dynamic from 'next/dynamic';

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

Или это вообще не поможет размеру пакета / загрузке страницы, так как MDXWrapper все еще импортируется по-старому? Как я должен думать об этом? Здесь важен уровень компонентов или уровень пакета, о котором я должен думать? Будет ли import { MDXWrapper } from '@/components/MDXComponents'; все равно импортировать весь файл целиком, сглазив мой динамический импорт?