feat(tree shaking): Start on implementing code splitting

[zoeyfrisart]

This implementation aims to add tree shaking to the Module, as the current implementation doesn't allow for proper tree shaking.

The implementation I made is not working as intended, but might still be of use for finding the proper implementation.

The issue

The issue is currently that our build process creates a very big bundle, was expecting that this was caused by it loading SVGs however this isn't the case. It's actually just 80KB of the require statements. 17KB of this is related to the isoToCountryCode.

My suggestion

My suggestion would be to instead of a giant bundle is to generate a code split bundle of modules, this will allow users to import only a part of the application and should also help with tree shaking as bundlers will be able to better treeshake.

The problem with my current implementation is that:

• Importing from allFlags still requires all the flags
• Importing the file now makes the bundlers include all the svg elements into the page, while this can't be seen in the bundle size. Using it in an application actually loads in all the SVGs

Desired solution

Well obviously the most desired solution would be that we can detect that if an element is unused that we drop it. But I'm unsure how we would be able to implement this.

But we would like to allow the user to do the following: import { NL, AD } from 'flagpack-core/flags' and have the bundle just include NL and AD (Not all the svg's and parts)

Another option would be to allow: import NL from 'flagpack-core/flags/NL'

Another solution would be to allow a user to create a config and that we then compile a part that only includes those parts (We would probably need to write a babel plugin for this)

[KingDarBoja]

Hello, this flag library looks pretty neat and even thought looks like it doesn't support tree-shaking out of the box, maybe I could suggest looking at https://github.com/kreuzerk/svg-to-ts which pretty much you can setup it to compile the svgs into their own JS files along with the whole type definition.

I am trying something similar at ngx-nations but with other two flag icon libraries.

Cheers!

[daoneandonly]

Thanks @KingDarBoja for your suggestions! While we've been working on some other parts of flagpack, this is certainly on our todo.

[zoeyfrisart]

We have written out our plan of action here, feedback is welcome and we will keep the discussion updated based on progress and new findings! #46

We will close this PR, as the implementation will be different, this however doesn't mean that we are no longer working on it. We however will approach the issue in a different way.