Gatsby Time to Interactive (оценка Маяка) увеличился из-за большого количества импортированных (но неиспользованных) компонентов

Question

TLDR: Я занимаюсь разработкой сайта Gatsby, который использует API JSON. Сайт немного вырос, и это увеличило TTI Google Time Lighthouse до неприемлемого уровня (около 7 секунд). Я думаю, что это вызвано слишком большим количеством импортированных компонентов, которые обычно даже не используются ..

Подробное объяснение:

Архитектура Сайт довольно прост, на каждой странице есть список модулей. Пример:

{ path: 'page-1', modules: ['a'] },
{ path: 'page-2', modules: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] },
{ path: 'page-3', modules: ['g', 'a'] }

Модули являются уникальными компонентами и могут содержать от 10 до 200 строк кода. Например, модуль a является компонентом контента, а модуль b является компонентом изображения.

Очень базовый c пример кода того, как компонент Page отображает модули:

import React from 'react'
import Module from './module'

const Page = ({ page }) => (
  <>
    <h1>{page.title}</h1>
    {page.modules.map((module, index) => (
      <Module module={module} key={index} />
    ))}
  </>
)

export default Page

Пример кода компонента Module (на самом деле этот компонент содержит около 20 (!) Модулей, которым требуется import )

import React from 'react'
import ModuleA from '../modules/module-a'
import ModuleB from '../modules/module-b'
import ModuleC from '../modules/module-c'

const Module = (props) => {
  const module = props.module
  switch (module) {
    case 'a':
      return <ModuleA {...module} />
    case 'b':
      return <ModuleB {...module} />
    case 'c':
      return <ModuleC {...module} />
    // etc...
    default:
      return <></>
  }
}

export default Module

проблема: Значение TTI (Время до Интерактивности) составляет 7 секунд для каждой страницы. Это означает, что на TTI не влияет количество модулей на странице. Кажется, что все импортированные компоненты добавляются в сборку Gatsby, даже если они на самом деле не используются страницей.

Вопрос:

• Gatsby или Webpack не могут отфильтровать (вытряхнуть) неиспользуемые (но импортированные) компоненты?
• Есть ли способ динамического импорта компонентов?

Пример исходного кода можно найти здесь: https://github.com/joostelders/gatsby-example. Несколько важных замечаний:

• В проекте используются темы Gatsby, это означает, что затенение компонентов является обязательным требованием.
• Значение TTI не проверяется с помощью данного репо, чтобы действительно это увидеть вам нужен большой проект со многими компонентами (я, очевидно, не могу поделиться этим)