Resolved tree shaking issue mentioned in issues #154

[oztek22]

This PR should resolve tree shaking issue mentioned in #154 without using all-files.

It also resolves typescript issue when you try to import esm file directly.

[oztek22]

When someone imports files from this library by using import statement, it will automatically use index.esm.js file without specifying type: module in index.js.

Currently typescript complains about the type If you directly import esm files which can be solved by specifying types.

[oztek22]

It will also resolve few tasks from #634

• improved build speed using esbuild etc.
• Easy to choose from more than 20 icon sets
• Split @react-icons/all-files into multiple packages. It contains too many files to be released as a single package.

[onelittleant]

Thank you for this fix. Upvote! The tree shaking issue is enormous for us. React-icons is most of our bundle size in out nextjs app.

[doelgonzo]

Any idea what the hold up is for this to be reviewed? This would greatly help our project

[JoeRoddy]

Big issue for us as well, our pages are extremely laggy from this, and all-files is missing a ton of icons we need.

[oztek22]

@kamijin-fanta @gorangajic @jayehmke @JeffersonFilho Are you going to maintain this library in future or planning to archive it?

[kamijin-fanta]

@oztek22 Sorry for the delay in replying. Thanks for your excellent contribution. Is it possible to add a test to this PR? Currently there is code in Webpack4 that tests that Tree-Shaking is done correctly.

https://github.com/react-icons/react-icons/tree/master/packages/webpack4-test

[kamijin-fanta]

CI step terminated abnormally. You need to run the code formatter.

[oztek22]

@kamijin-fanta I fixed the pipeline but unfortunately I cannot run https://github.com/react-icons/react-icons/tree/master/packages/webpack4-test locally as it gives me following error:

Field 'browser' doesn't contain a valid alias configuration
                  /react-icons/packages/_react-icons_all/lib/index.js doesn't exist

[kamijin-fanta]

Both my environment and the CI environment are working fine... check the yarn version and build-script.sh.

[oztek22]

Okay it worked after running the shell script.
maxEntrypointSize was before 100000 bytes. (Not sure how much was the size of generated build before)
Now the size of generated build is 8.38 KiB. So I updated maxEntrypointSize to 9000 bytes accordingly.

Would that be suffice?

[kamijin-fanta]

Please add a test that fails if you do not apply this PR change. webpack4-test is the test code to verify that Tree-Shaking is working with Webpack4. You do not need to edit this. I want everyone to be able to see what bundler/configuration is causing the problem. For example you would be adding a Next.js project.

[oztek22]

@kamijin-fanta I will try it, if anyone else has time for it, feel free to add a commit on my pr.

[FallingSnow]

I spent a while on this only to realize source-maps were being inlined because of my webpack config.

I also tested this pull request before and after applying the patch and noticed no change in output size. Both about 8kB. Both had tree shaking working.

[jochenschmich-aeberle]

Hi there! Thanks for your efforts. Any news about this PR? Would it make @react-icons/all-files obsolete?
If so, it would be very welcome, as it is outdated.