Вопрос о встряхивании деревьев / побочных эффектах

Я пытаюсь уменьшить размер пакета моего проекта nextjs, и у меня проблема с тряской дерева. Позволь мне объяснить. У меня есть файл Flags.js, который экспортирует компонент с несколькими флагами:

export { default as FlagsCn } from './FlagsCn';
export { default as FlagsDe } from './FlagsDe';
export { default as FlagsEsCt } from './FlagsEsCt';
export { default as FlagsEs } from './FlagsEs';
export { default as FlagsFr } from './FlagsFr';
export { default as FlagsGb } from './FlagsGb';
export { default as FlagsGr } from './FlagsGr';
export { default as FlagsIt } from './FlagsIt';
export { default as FlagsJp } from './FlagsJp';
export { default as FlagsNo } from './FlagsNo';
export { default as FlagsPh } from './FlagsPh';
export { default as FlagsPt } from './FlagsPt';
export { default as FlagsRu } from './FlagsRu';
export { default as FlagsTh } from './FlagsTh';
export { default as FlagsBg } from './FlagsBg';

Затем я импортирую в другой компонент только два флага:

import { FlagsFr, FlagsGb } from '@components/Flags';

Но я заметил, что все флаги импортируются, когда я заглядываю в пакет с помощью webpack-bundle-analyzer. Если я применю sideEffects к false в package.json, размер файла пакета js уменьшится на 400 КБ, но во время навигации у меня возникнет странная ошибка. Я думаю, это означает, что некоторые библиотеки вызывают побочные эффекты.

Так что я должен делать ? Спасибо за помощь :)


person Lucien Peslier    schedule 09.10.2019    source источник
comment
Посетить все модули, которые были отброшены, и проверить их утверждения верхнего уровня?   -  person Bergi    schedule 09.10.2019
comment
Вам нужно выяснить, какой код имеет побочные эффекты, и предоставить массив sideEffects, в котором перечислены эти модули. см. документацию по веб-пакету для получения дополнительной информации.   -  person Euan Smith    schedule 10.10.2019


Ответы (1)


Возможная причина может заключаться в том, что вы не установили mode: 'production' в webpack.config.js.

Кроме того, если вам не нужны все флаги одновременно, рассмотрите возможность разделения кода. Это можно сделать:

person winwiz1    schedule 09.10.2019
comment
Вы предлагаете несколько Reat SPA - React нигде не упоминается в вопросе. - person Euan Smith; 09.10.2019
comment
@EuanSmith Верно. Это конкретное предложение основано на предположении, что используется React, и в противном случае его можно проигнорировать. - person winwiz1; 09.10.2019
comment
Спасибо за ответ @ winwiz1! Рабочий режим установлен правильно, а флаги в проекте пока не используются, поэтому они мне не нужны в финальном пакете, даже если они находятся в отдельном js-файле с динамическим импортом. Между тем я использую nextjs / babel / react. У Babel также нет набора плагинов commonjs transform (я знаю, что он может сломать дрожание дерева - person Lucien Peslier; 10.10.2019