CRA: Извлекать особо большие модули в отдельные куски? - PullRequest
Новая
       103

CRA: Извлекать особо большие модули в отдельные куски?

0 голосов
/ 02 мая 2020

Использование последней версии CRA. Все node_modules объединены в отдельный кусок, что приятно. Но этот кусок по-прежнему превышает несколько мегабайт. В то же время я не вижу никакой возможности переопределить или настроить chinking logi c в CRA. В основном я хотел бы извлечь особенно большие модули из этого блока node_modules и загрузить их как отдельные блоки целиком. Это возможно без извлечения?

Ответы [ 2 ]

1 голос
/ 02 мая 2020

Как упоминал Деннис, React.lazy - это один хороший способ. Но если вы хотите полностью контролировать модули, которые поступают из node_modules или из любого места в вашем проекте - взгляните на webpack splitchunks

Это даст вам возможность решить, какой модуль идет на какой кусок. Быстрый пример: 

optimization: {
        splitChunks: {
            cacheGroups: {
                monaco_editor: {
                    test: /monceo-editor[\\/]/,
                    name: 'monaco_editor',
                    maxSize: MaxChunkSize,
                    minSize: MinChunkSize
                },
            }
        }
    }

Например, здесь я говорю, что возьмите все модули (файлы) в директории monaco-editor и поместите их в одну корзину - эта группа будет позже разделена на несколько блоков, каждый с минимальный размер MinChunkSize и максимальный размер MaxChunkSize.

Блок поставщика - это автоматическая группа кэша c, добавляемая веб-пакетом. - Он извлекает все модули из узловых модулей, которые не загружаются динамически, и помещает их в один блок.

Вы можете отключить это поведение, установив: 

cacheGroups: {
    defaultVendors: null
}

Вы можете определить свой собственный Простое / сложное распределение node_modules. Вы можете определить определенные пакеты, чтобы всегда go для определенных кусков. Таким образом, кэш чанка не изменится, если вы не обновите одну из версий пакетов - это хорошая практика для повышения производительности, поскольку этот кеш, скорее всего, будет обслуживаться из кеша.

Вот более сложный пример, который хорош для производительности: 

optimization: {
        splitChunks: {
            cacheGroups: {
                myVendor: {
                    test: /node_modules[\\/]/,
                    name(module) {
                        const matched = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/);
                        const packageName = matched && matched.length > 2 ? matched[1] : undefined;

                        return packageName;
                    },
                    maxSize: MaxChunkSize,
                    minSize: MinChunkSize
                },
            }
        }
    }

В этом примере каждый пакет будет pu sh в свое собственное ведро. Теперь ведро будет сливаться или делиться на минимальный / максимальный размер.

1 голос
/ 02 мая 2020

Да, с React.Lazy он отделит указанные c компоненты от основного блока. 

const OtherComponent = React.lazy(() => import('./OtherComponent'));

См. Разделение кода .

Если вы не хотите извлекать, смотрите react-app-rewired или пользуйтесь другими услугами, кроме CRA, такими как Gatsby .

...