Javascript 在文件中导入多个组件而不产生性能问题的最佳方法是什么？

事情是这样的：

我在React应用程序中访问了几个组件，但每次我在其他文件中导入它们时，都会有太多的导入，如下所示：

components
|+comp1
|     - comp1.component.tsx
|     - comp1.styles.tsx
|+comp2
|     - comp2.component.tsx
|     - comp2.styles.tsx
|...
|

在这些文件夹中，我没有提到使用

样式化组件的关联样式文件，这些组件的名称如下：
comp1.styles.tsx
太多我的命名约定样式

以下是我用来解决这个问题的一些方法：

第一次进近

在每个组件目录中，我都将我的组件文件重命名为
index.tsx
，将我的
styled组件
样式重命名为
styles.tsx

以下是该方法的结果：

components
|+comp1
|     - index.tsx
|     - styles.tsx
|+comp2
|     - index.tsx
|     - styles.tsx
|...
|

第二次进近

我没有将组件文件重命名为每个文件夹中的
index.tsx
，而是将它们保持原样：
comp1.component.tsx
和style
comp1.styles.tsx
。但在每个组件文件夹中，我创建了一个名为
package.json
的文件，配置如下

 {
   "main":"./comp1.component.tsx"
 }

它工作得很好，就导入而言，结果如下

components
|+comp1
|     - comp1.component.tsx
|     - comp1.styles.tsx
|     - package.json
|+comp2
|     - comp2.component.tsx
|     - comp2.styles.tsx

|...
|

所有这些方法都在发挥作用，但主要问题仍然存在：

有太多的组件导入语句

第三种方法
为了解决这个问题，我在
组件文件夹
的根目录中创建了一个名为
index.tsx
的文件，对于我的每个组件，我都使用了一个名为export的
文件，如：
export const Comp1:React.FC=（props）=>{…}

在我的
index.tsx
文件中，我做了如下工作：

components
|+comp1
|     - comp1.component.tsx
|     - comp1.styles.tsx
|+comp2
|     - comp2.component.tsx
|     - comp2.styles.tsx
|...
|-index.tsx
|

当我导入它们时，可读性更强，代码更少：

从“./components”导入{Comp1，Comp2}

我真的很喜欢，但我担心的是上面的语法是
解构
语法，所以即使我只使用
Comp1
和
Comp2
我每次都导入所有组件，我认为这可能是一个性能问题，特别是对于生产构建，因为任何组件都在导入所有其他
app
组件

这就是我尝试过的，但最后一个对我来说是最好的，适合我的需要，但是有性能问题

你知道我如何在不造成性能问题的情况下实现相同的目标吗

注意！我不是以英语为母语的人，所以请理解我的写作并不完美。
为什么你认为“必须输入大量的语句”是个问题？事实并非如此。捆绑程序（webpack或类似程序）将为您编译所有这些内容并进行处理。是的，请理解，但问题是，使用此语法从“./components”
导入{Comp1，Comp2}，我只使用通过解构获得的组件
Comp1
和
Comp2
，btu所有其他可用组件也已加载，对吗？
components
|+comp1
|     - comp1.component.tsx
|     - comp1.styles.tsx
|     - package.json
|+comp2
|     - comp2.component.tsx
|     - comp2.styles.tsx

|...
|

import Comp1 from "../components/comp1/"
import Comp2 from "../components/comp2/"
import Comp3 from "../components/comp3/"
import Comp4 from "../components/comp4/"

components
|+comp1
|     - comp1.component.tsx
|     - comp1.styles.tsx
|+comp2
|     - comp2.component.tsx
|     - comp2.styles.tsx
|...
|-index.tsx
|

export * from "./components/comp1/"
export * from "./components/comp2/"
export * from "./components/comp3/"
export * from "./components/comp4/"