Как избежать дублирования кода в чанках, используя CRA + разбиение кода
Например, скажем, у нас есть два компонента с общим импортом:
...
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.
Есть ли лучшие решения здесь?