小编And*_*ini的帖子

背景

我正在使用 Gatsby 构建博客，并且正在努力提高性能。我还想实现代码分割和延迟加载。

2 导入组件的方式

假设我必须导入同一文件夹中的 2 个组件；有两种方法可以做到这一点：

方式 1：将所有组件分组到一个index.ts 文件中

import { Component1, Component2 } from '../components/index.ts'

方式2：引用特定路径导入单个组件

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

问题

第一种方式看起来更好并且编码速度更快，但是它对性能有什么影响呢？

根据我在Gatsby Documentation中读到的内容，第二种方法应该是首选，因为否则 Webpack 还会捆绑并导入您实际上不需要的其他组件，从而增加捆绑包的大小（并对性能产生负面影响）。

然后，我是否应该将所有分组导入转换为特定导入，并删除 index.ts 文件？