BACKGROUND:
I have a project where I have all my UI components in a /components directory.
Right now I export each component in its own file as:

export function Component1() { ... } 

and import them individually into my page as such:

import { Component1 } from "@/components/Component1";
import { Component2 } from "@/components/Component2";

I would like to be able to import multiple components at once, like this:

import { Component1, Component2 } from "../components";

So I created this index/manifest file:
/components/index.js

import { Component1} from './Component1';
import { Component2} from './Component2';

export { Component1, Component1 }

THE ISSUE:
The issue is that when I try to import them using this syntax:

import { Component1, Component2 } from "../components";

It seems to be importing ALL the components at once because I noticed a significant slow down my compiled index.js chunk went from 169kb to 6MB.