从索引文件的单次导入与多次单次导入 - 对性能的影响？

Question

背景

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

假设我必须导入同一文件夹中的 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 文件？

Answer 1

如果您使用最新的 webpack 版本，那么 tree shake 功能将最大限度地减少以您所描述的方式导入到生成的包中的内容。

在您提供的链接中，它专门指的是 Gatsby v2，因此我假设它不再适用于 v3 及更高版本。