Как избежать дублирования кода в чанках, используя 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.

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

0 ответов

Другие вопросы по тегам