Webpack@4 is not tree shaking a file exporting SVGs (font-awesome@5)

[navarroaxel]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
webpack@4 can't tree shaking the @fortawesome/fontawesome-free-solid, even when I change their node_modules/@fortawesome/fontawesome-free-solid/package.json adding the "sideEffects": false.

I have following this issue FortAwesome/react-fontawesome#70 making several tests but we can't find a solution.

Maybe you can help to the FortAwesome's team to reach a solution.

If the current behavior is a bug, please provide the steps to reproduce.
You can check the bug yourself using this repo: https://github.com/navarroaxel/fa-bundle-bug

What is the expected behavior?
webpack should optimize the @fortawesome/fontawesome-free-solid library exporting only one icon.
If this is a feature request, what is motivation or use case for changing the behavior?
N/A
Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.
node@6 or node@8
webpack@3 or webpack@4
react@16.2
fortawesome/react-fontawesome@0.0.17
fortawesome/fontawesome-free-solid@5.0.8
OS: Ubuntu 17.10

[kzc]

This is not a webpack bug. Packages must be designed with tree shaking in mind. If they have function calls with side effects then code must be retained in the event it is used.

I am not a fan of debugging commercial software, but if you look at node_modules/\@fortawesome/fontawesome-free-solid/index.es.js this line of code prevents unused definitions from being dropped:

  define('fas', icons$1);

If it is commented out then the final bundle will be 300K smaller.

[navarroaxel]

Thanks a lot for the solution @kzc !

[mlwilkerson]

The package @fortawesome/fontawesome-free-solid belongs to the Font Awesome 5.0.x line. It is known not to facilitate tree-shaking for the reason @kzc specified. In that version, you can, however, configure it for tree-shaking, but it requires configuring webpack to use shakable.es.js instead of index.es.js. See documentation here.

In Font Awesome 5.1 (in preview currently), the equivalent package is called @fortawesome/free-solid-svg-icons. It is designed with tree-shaking in mind, without any additional configuration. Documentation here.