How to optimize the bundle size of the imported shadcn Select component in next.js?

[CSYYDS]

<Select>
  <SelectTrigger className="w-full">
    <SelectValue placeholder="select something..." />
  </SelectTrigger>
  <SelectContent className="w-full">
    <SelectGroup>
      <SelectItem value="all">all</SelectItem>
      <SelectItem value="x1">x1</SelectItem>
      <SelectItem value="x2">x2</SelectItem>
      <SelectItem value="x3">x3</SelectItem>
      <SelectItem value="x4">x4</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

First Load JS(using @next/bundle-analyzer to check)

• Bundle size without the Select component: 112kB
• The bundle size of the Select component: 140kB

I tried using next/dynamic to import SelectContent, but this doesn't work, as long as I import the '@/components/ui/select' file in the component, even if I only import the <Select> component, it will still increase the bundle size by 28kB.

My idea is to only display the content of <SelectTrigger> when the page is first rendered (because the user may not click it at all, so there is no need to load the content of <SelectContent> immediately). When the user clicks the Select component, the content in <SelectContent> is dynamically imported.

const DynamicSelectContent = dynamic(() => import('@/components/ui/select').then((mod) => mod.SelectContent), {
  ssr: false,
})

<Select>
  <SelectTrigger className="w-full">
    <SelectValue placeholder="select something..." />
  </SelectTrigger>
  <DynamicSelectContent className="w-full">
    <SelectGroup>
      <SelectItem value="all">all</SelectItem>
      <SelectItem value="x1">x1</SelectItem>
      <SelectItem value="x2">x2</SelectItem>
      <SelectItem value="x3">x3</SelectItem>
      <SelectItem value="x4">x4</SelectItem>
    </SelectGroup>
  </DynamicSelectContent>
</Select>

How can I optimize this bundle size? Thanks in advance! :-)