Implement tree shaking/bundle size reduction
EliteMasterEric opened this issue · comments
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.
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.
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.