Как избежать дублирования кода в чанках, используя CRA + разбиение кода

Question

Например, скажем, у нас есть два компонента с общим импортом:

...

import Hello from './Hello'

class A extends Component {}

и

...

import Hello from './Hello'

class B extends Component {}

Эти компоненты затем загружаются асинхронно в другом компоненте, например:

...

import Loadable from 'react-loadable'

const AsyncA = Loadable({
    loader: () => import(/* webpackChunkName: "A" */ "./A"),
    loading: () => <div>Generic Loading Message</div>
});

const AsyncB = Loadable({
    loader: () => import(/* webpackChunkName: "B" */ "./B"),
    loading: () => <div>Generic Loading Message</div>
});

И блоки "A", и "B" будут содержать код "Hello", который доставит дублированный код в браузер.

В своем исследовании я определил, что этого не будетпроисходит, если «Hello» импортируется в любой другой компонент, который не загружен асинхронно.В этом случае он объединяется в «основной» блок вместо блоков «A» и «B.».

Хотя это и опция, она оставляет желать лучшего.В этом руководстве показано, как настроить веб-пакет для создания «общего» модуля, который кажется идеальным, поскольку для достижения желаемого эффекта не требуется никакой реструктуризации кода.

Однако настройки веб-пакетаCRA запрещены.

Есть ли здесь лучшие решения?