Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement tree shaking/bundle size reduction #378

Open
EliteMasterEric opened this issue Feb 19, 2021 · 2 comments
Open

Implement tree shaking/bundle size reduction #378

EliteMasterEric opened this issue Feb 19, 2021 · 2 comments

Comments

@EliteMasterEric
Copy link

Currently, all country flags are included in the app bundle regardless of which flags are actually used.

WebPack has features to include only the necessary parts, in a manner similar to that utilized by @material-ui/icons, but this would require a rewrite of this library.

As it is, the current bundle size is excessive and a fix needs to be implemented for the library to be useful.

@smucode
Copy link
Owner

smucode commented Mar 6, 2021

Hey, thanks for the feedback. So the idea of this lib was it should be simple to use, would not need any config of external css, webpack or anything. It should just work. So I wanna stay true to that.

To understand your usecase, do you only ever need to use a finite set of flags which are known at compile time and all the other unused ones can be removed by the bundler? If that's the usecase, an option is to use use svg-country-flags directly:

import flag from 'svg-country-flags/svg/no.svg'
<img src={flag} />

If you need access to all the flags at runtime, i'm not sure tree shaking can be used. I guess then adding all the SVGs from svg-country-flags to your app, serving those with webpack would be a good option.

There is a solution in #3 (comment) that might work for you as well.

Wsiegenthaler added a commit to Wsiegenthaler/react-world-flags that referenced this issue Dec 4, 2022
@nocive
Copy link

nocive commented Feb 22, 2024

For those coming across this, you might be interested in the fork referenced in this PR: https://www.npmjs.com/package/@weston/react-world-flags

If you use a modern bundler and the "raster" flags, it will drastically cut the bundle's size.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants