关于摇树/副作用的问题

Question

我试图减少我的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查看捆绑包时，所有标志都被导入。如果我在package.json中应用了sideEffects to false，js包文件大小会减少400kb，但是在导航过程中我遇到了一些奇怪的错误。我认为这意味着一些图书馆正在造成副作用。

那我该怎么办？谢谢你的帮助：）

Answer 1

可能的原因是您没有在webpack.config.js中设置模式：“生产”。

此外，如果不需要同时使用所有标志，请考虑代码拆分。它可以通过以下方式完成：

>

拥有多个React SPA