Question about tree-shaking / side-effects

Question

I am trying to reduce bundle size of my nextjs project and I have some problem with tree shaking. Let me explain. I have a Flags.js file that export multiple flags component:

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';

Then I import only two flags into my other component:

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

But I noticed that all Flags are imported when I take a look into the bundle with webpack-bundle-analyzer. If I apply sideEffects to false into the package.json, the js bundle file size reduce by 400kb but I've got some strange error during the navigation. I think it means that some library are causing side effects.

So what should I do? Thanks for you help:)

Answer 1

A possible reason could be that you have not set mode: 'production' in webpack.config.js.

Additionally, if you don't need all the flags simultaneously then consider code splitting. It can be done by:

• using dynamic imports

• having multiple React SPAs