Vue CLI Web Component export contains all the Font Awesome icons

[Bounty31]

I am trying to export a component as a Web Component using the latest Vue CLI, the component uses the FontAwesomeIcon component.

I followed the example in the README (https://github.com/FortAwesome/vue-fontawesome#web-components-with-vue-web-component-wrapper) and it works correctly but I noticed that the exported Web Component is including not only the icons it should but all of the Font Awesome icons.

This is the output size of the normal build (which includes only the used icons)

This is the output size of the Web Component build

It includes all the Font Awesome icons, looks like the Tree Shaking is not happening for some reason..

Here is a test repository https://github.com/Bounty31/vue-cli-font-awesome-web-component

[raymondtri]

I have noticed this too, it's really disappointing.

[raymondtri]

Digging even deeper into this, tree shaking is not working properly on vue from @fortawesome/fontawesome-svg-core.

This is adding a tremendous amount of weight to the package as well.

Here is the production size of my app.js without loading anything fontawesome:

Here is the production size of my app.js with just the following lines (vue-fontawesome):

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
Vue.component('font-awesome-icon', FontAwesomeIcon);

Here is the production size of my app.js with just the following lines (fontawesome-svg-core, note I am not even importing any icons):

import { library } from "@fortawesome/fontawesome-svg-core";

Keep in mind that these are gzipped + minified size increases. The actual stat size for fontawesome-svg-core is 73.75 KB.

In fact, the lack of working tree-shaking means that inclusion of this library (and specifically the fontawesome-svg-core) alone nearly pushes you over Google's pagespeed recommendations for javascript bundle size. This is directly contrary to the mission statement of @FortAwesome's github. Tools to help you be moar betters on the web.

Can we please get some attention on this issue?

@robmadole @supercodepoet @talbs

[robmadole]

@raymondtri you are referring to a different issue than originally reported for this issue (this one is focused on icons being tree-shaken). We'll deal with your stuff in https://github.com/FortAwesome/Font-Awesome/issues/16005

[robmadole]

@Bounty31 you'll probably have better luck asking the Vue team about this. Looks like switching the target change the behavior. I'm not sure why that would be. I'll leave this issue open.