Background

I'm using Gatsby to build a blog, and I'm trying to improve performance. I also want to implement code-splitting and lazy loading.

2 Ways of importing components

Let's say I have to import 2 components that are in the same folder; there are two ways to do this:

Way 1: Group all the components in an index.ts file

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

Way 2: Import the single components referencing the specific path

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

Question

The first way looks better and is faster to code, but what are its effects on performance?

From what I read in the Gatsby Documentation, the second approach should be preferred, because otherwise Webpack will bundle and import also other components that you don't actually need, thus increasing the size of the bundle (and negatively effecting performance).

Should I then convert all my grouped imports into specific imports, and remove the index.ts files?