Tree Shaking via ES6 destructuring

[codeofsumit]

Tree Shaking via ES6 destructuring

[robmadole]

It is. This is top priority for our dev team right now.

[robmadole]

We're working on this soon. Right now tree-shaking takes additional configuration.

https://fontawesome.com/how-to-use/use-with-node-js#tree-shaking

This will change in the near future and be supported out-of-the-box.

[colbyhub]

Just wanted to bump this! The spot where it's mentioned in the docs is within the first code example under tree shaking. This issue is actually beyond just vue-fontawesome, but rather the project as a whole 😄.

It would be nice if the tree shaking only included the icons specified, but it sounds like this is already on your radar!

[mlwilkerson]

@theSdev Are you still having trouble with this? I noticed you found my demo (I fixed the doc bug—thanks for reporting).

If not, what differences are there in your configuration compared to the demo? I just ran it again with updated dependencies and it is successfully tree shaking. (Ex: the only icon unicode included in the bundle is f0f4 (faCoffee). There's no f007 (faUser), for example).

When you say it doesn't work, what outcome are you seeing that is unexpected?

[mlwilkerson]

Also note the known problems here with the minifier that ships by default with Webpack 4, and which is known to cause problems with tree-shaking our bundles. There are some workarounds offered in that guide, if that describes the problem you're facing.

[codeofsumit]

thanks for the info @robmadole. Will go for the easier import

import faLocationArrow from '@fortawesome/fontawesome-pro-solid/faLocationArrow';

until this can be done without config 👍

[nmsmith22389]

I actually tried doing the tree shaking exactly as suggested and while it worked perfectly (I double checked the code and it only exported the imported icons) it didn't seem to actually reduce the size much. Since the icons not used are still defined, just not exported, the size doesn't seem to be reduced by much if any at all. Doing it the way @codeofsumit suggested, explicitly importing each icon, works well and reduces the compiled file size, but I was hoping to be able use this method. Am I doing something wrong or is that just how it is? I did everything right and followed the docs and it definitely works I'm just not seeing the reduction in file size.

[robmadole]

When you import like import { faLocationArrow } from '@fortawesome/fontawesome-pro-solid' it allows the main module (probably the ES6 index.es.js) file to load. That file has a side effect in it that registers all the icons into a global namespace if it can (off the window object). The reason we did this was that we had users expecting to use the NPM packages like they would the code we distribute on the CDN.

We have since realized that we need to break out separate NPM packages for this and steer people toward the correct one.

[Coletrane]

In the interim can we get a quick update to the README? It specifically says import { faLocationArrow } from @fortawesome/fontawesome-pro-solid will import that icon only. (at least it does on vue-fontawesome)

[robmadole]

@Coletrane I can't find the spot in the README that references that import style. Can you help me out?

[mlwilkerson]

For those who haven't yet ventured into the realm of the pre-releases on the development branch here, here's a little working demo repo I threw together that demonstrates tree shaking that Just Works™️ in Font Awesome 5.1.

https://github.com/mlwilkerson/vue-fontawesome-tree-shaking-demo

[h43z]

@mlwilkerson sorry for my stupid question but why exactly is it already working in the repo you mention? How is it dependent on the actual Font Awesome project? I don't see a dependency to it anywhere in the package.json files. I included the latest @fortawesome/free-solid-svg-icons, @fortawesome/vue-fontawesome and @fortawesome/fontawesome-svg-core and the tree shaking is still not working for me. What am I missing? Does one have to put something in the webpack.config? Thanks.

[mlwilkerson]

I'm not sure I understand where the disconnect is, but maybe this will help. If not, I'm glad to try again 😉...

In my demo repo's package.json, I have a dependency on the prerelease version of vue-fontawesome, not the latest version. When you say that you installed the "latest" @fortawesome/vue-fontawesome, I wonder if you actually installed the one that has the npm dist-tag of latest. If so, then you're not using the prerelease version, and therefore I would not expect tree shaking to work.

You'd need your package.json to have a version string that references the prerelease version, either by specifying that dist-tag, like:

"@fortawesome/vue-fontawesome": "prerelease"

or by specifying the prerelease version number like this:

"@fortawesome/vue-fontawesome": "0.1.0-4"

I just updated that demo repo's package.json to use the prerelease dist-tag form instead of the version number form, just to maybe highlight that distinction a bit more. Hopefully, that's clarifying.

[h43z]

@mlwilkerson thank you for your answer and sorry for the confusion. I use

    "@fortawesome/fontawesome-svg-core": "^1.2.0-11",
    "@fortawesome/free-solid-svg-icons": "^5.1.0-8",
    "@fortawesome/vue-fontawesome": "0.1.0-4",

I import only one icon with

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faAngleDown } from '@fortawesome/free-solid-svg-icons'

but I still can find all icons in the final webpack bundle. Therefore my question do I have to put something into the webpack config to make this work? I did not use vue-cli. I build my own still modest webpack config.

[mlwilkerson]

Ah, ok. So I'm not too familiar yet with webpack config. vue-cli definitely handled all of that for me in my demo repo. I'm not sure what tells webpack to shake the tree.

One option could be that you pull down my demo, and after doing the yarn or npm install, run

./node_modules/.bin/vue-cli-service inspect

That would dump the internal webpack config that it's using. You might be able to spot what magic it may contain that your webpack config is lacking. And if you do find it, please let me know so I can work up a demo that sheds further light on webpack configuration.

[h43z]

Thanks for the tip with the inspect (even though I don't use vue-cli, good to know for the future).
I think I figured it out. Tree shaking happens only with webpack in production mode. At least I could not find any indication in the final bundle of other icons than I imported in my source.

[robmadole]

Tree shaking is now greatly improved in our development branch and slated for 0.1.0.

[theSdev]

So I'm using 0.1.0 and tree-shaking does not work with webpack and es6 destructing (I've followed the tutorial here). Is this the expected behavior? Has tree-shaking support been delayed?
I'm running webpack in production mode btw.

[theSdev]

I'm going to give vue-cli a try, but I think making it clear what is needed in the webpack config for getting tree-shaking to work is the right way to go, as in webpack docs itself just getting in to production mode should do the trick.
Regarding the link you kindly provided, it seems to be related to performance issues mostly, which is not the problem I have here, bundling is pretty quick, but SVG code for all of the icons are present in the bundle.
Will write back here when I finish experimenting the other options.
Thanks.

[mrodal]

Is this resolved? I still get the full weight when importing just 1 icon with something like
import { faAngleDown } from '@fortawesome/free-solid-svg-icons

[robmadole]

@mrodal yep, this is fixed. There are issues with older tooling that @mlwilkerson [pointed out](url
https://fontawesome.com/how-to-use/with-the-api/other/tree-shaking) but it is working.

[mrodal]

Thanks, @robmadole. With your example project I've isolated the issue to the icon library version. We have the pro icons, and the latest version that Im managing to get is the 5.0.13. When I change this to the free-solid-svg-icons (thats in the 5.5.0) I get the tree shaking as expected.
Are there newer versions of the pro icons?

[robmadole]

@mrodal yep just s/free/pro for solid and regular. We also have a pro-light-svg-icons :)