I am trying to wrap my head around how these things work / how to think about this. Say I have these 2 imports in my next.js project:

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

Would it help to refactor it dynamically like so with just one of them? :

import dynamic from 'next/dynamic';

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

Or will this not help the bundle size / page load at all, since MDXWrapper is still imported the old way? How should I think about this? Is it the component level that counts here or is it the package level that I should be thinking about? Will doing import { MDXWrapper } from '@/components/MDXComponents'; still import the whole file all the same, jinxing my dynamic import?