Font-awesome: Entire index.es.js being included in production bundle

[mattoni]

Hi, I'm doing a production build with webpack 4, and it looks like the entire index.es.js is being included in my compiled version, despite explicitly using the proper es import syntax, i.e. import { faSearch } from "@fortawesome/pro-solid-svg-icons";

Might also be important to note that I'm using Typescript, with the following module settings:

{
    "compilerOptions": {
        "module": "esnext",
        "strict": true,
        "target": "es6",
        "outDir": "dist",
        "noImplicitReturns": true,
        "sourceMap": true,
        "pretty": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "removeComments": false,
        "suppressImplicitAnyIndexErrors": true,
        "experimentalDecorators": true,
        "baseUrl": "./src",
        "moduleResolution": "node",
        "jsx": "react",
        "noEmitHelpers": true,
        "importHelpers": true,
        "lib": [
            "dom",
            "es6"
        ],
        "paths": {
            "__mocks__/*": [
                "../__mocks__/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "fuse.ts"
    ]
}

Production webpack settings:

const merge = require("webpack-merge");
const common = require("./webpack.common.js");

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

module.exports = env =>
  merge(common(env), {
    mode: "production",
    optimization: {
      splitChunks: {
        cacheGroups: {
          default: false,
          commons: {
            test: /[\\/]node_modules[\\/]/,
            name: "vendor_app",
            chunks: "all",
            minChunks: 2,
          },
        },
      },
    },
    plugins: [new BundleAnalyzerPlugin()],
  });

Versions:

    "webpack": "^4.28.4",
    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/fontawesome-svg-core": "^1.2.12",
    "@fortawesome/free-brands-svg-icons": "^5.6.3",
    "@fortawesome/pro-solid-svg-icons": "^5.6.3",
    "@fortawesome/react-fontawesome": "^0.1.4",

Let me know if you need anything else from this, but I'm hoping someone can shed some light for me.
Thanks so much!

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

Sorry but I cannot help on this.

Does https://fontawesome.com/how-to-use/with-the-api/other/tree-shaking help?

Also, I think that "@fortawesome/fontawesome": "^1.1.8" is not required anymore and must be avoided from FA >= 5.1.0, please take a look here: https://github.com/FortAwesome/Font-Awesome/blob/master/UPGRADING.md#no-more-default-imports

Can you provide a reduced test case and host it on github? It will speed up things if there is an issue

Let's also wait for feedback from the community

[mattoni]

Hi,

I followed the tree shaking stuff initially and it says no extra config is needed for standard webpack stuff which is why it's confusing that it's pulling it in this way. I removed the extra lib, thanks for that info. I'll try and get a test around but I'm under some strict deadlines and I doubt I'll have time soon.

Thanks again.

[tagliala]

I followed the tree shaking stuff initially and it says no extra config is needed for standard webpack stuff

That is true, I'm getting tree-shaking built-in in my Webpack 4 project, but I'm not using Typescript

I'll try and get a test around but I'm under some strict deadlines and I doubt I'll have time soon.

Feel free to provide at your convenience a test case with the minimum amount of code (including full package.json, webpack configuration files, etc.) needed to reproduce your issue. I will take a look and escalate it as soon as I'm able to reproduce.

If someone else in the community is experiencing this issue, please let me know

[piernik]

I have the same problem - tree shaking is not working.
I'm using angular so typescript and @fortawesome/angular-fontawesome
I've made tests with only one icon:

import {faCircle} from '@fortawesome/pro-solid-svg-icons';
import {dom, library} from '@fortawesome/fontawesome-svg-core';

library.add(faCircle);
dom.watch();

And as a result I have >1MB in bundle:

[piernik]

I changed import method to:

import {faCircle} from '@fortawesome/pro-solid-svg-icons/faCircle';
import {dom, library} from '@fortawesome/fontawesome-svg-core';

library.add(faCircle);
dom.watch();

and now it's working:

Should we use import {faCircle} from '@fortawesome/pro-solid-svg-icons/faCircle'; inseatd of import {faCircle} from '@fortawesome/pro-solid-svg-icons'; ?

[tagliala]

Could you please provide a repository replicating this issue?

[piernik]

Well not exactly since I'm using pro version.
But it is very easy to reconstruct. with angular cli start a new project and npm install:

    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.13",
    "@fortawesome/pro-solid-svg-icons": "^5.7.0",

Import FontAwesomeModule to AppModule and in app.component import and use icons.

[tagliala]

@piernik not an angular developer here

Could you please provide a step-by-step tutorial?

Also, I do not know how to generate the above map to check sizes

[piernik]

I dived into fa docs and I think it's known issue:
https://fontawesome.com/how-to-use/with-the-api/other/tree-shaking#production-mode

It wille be tree shaken in production. Well I changed import method to exact icon files so it's ok for me.

[mattoni]

Just to be clear, my issue IS happening in production builds.

[alflennik]

~Here is a repro repository with parcel, another tool where this is happening~.

~This is being tracked on the Parcel issues page as well, but if this is being reported with Webpack as well, it must be an issue with FontAwesome, not Parcel.~

EDIT:

I was able to get Webpack's tree shaking to work following instructions on another issue, but tree-shaking is confirmed to be not working with Parcel.

Refer to my repro to see the failure in action.

[andyrichardson]

While I'm sure explicitly importing files works, it's not really tree shaking (dead code elimination). It would be nice to have tree shaking support (e.g. import { faCoffee } from '@fortawesome/free-solid-svg-icons'; would only include _faCoffee_ in the bundle).

Assuming the font packages are side-effect free (which they look to be), adding sideEffects: false to the _package.json_ will let webpack know that it is safe to ignore code that is not being imported (and allows for tree shaking).

There's more information about adding tree shaking support here.

[seanzi86]

Did anyone manage to come up with a solution without using deep imports?

[briangonzalezmia]

@andyrichardson Thanks! While not pretty (and not really tree shaking) it is effective. I'll stick to this method for now.

[a-martynovich]

When I add "sideEffects": false to package.json in @fortawesome/free-solid-svg-icons tree-shaking works well, as well as the icons themselves. This seems like a great solution.

[tagliala]

Thanks @a-martynovich!

Are there side effects in adding "sideEffects": false ?

[a-martynovich]

@tagliala Not that I know of. It works for my use case (I'm using only webpack and JavaScript). And as @andyrichardson said, the packages look side-effect free.

[tagliala]

I'm not an expert node developer. I know about the sideEffect property, I've also tried to study that but I didn't understand it properly and I just have a guess of what it means, so sorry if I can't help

Let's ask to @mlwilkerson or @robmadole if they could help here

[robmadole]

I think we could probably set sideEffects to false for the SVG icon packages. I'll get this added to 5.12.0.

[robmadole]

5.12.0 is out. Please let me know if this helps.

[a-martynovich]

It works! Don't forget to set NODE_ENV=production like I just did.

[crowlKats]

been trying to get tree shaking to work with fontawesome in my react project, but it isnt working at all... here is my config. i get the whole index.es.js bundle, which is basically 2/3 of my project bundle size

[robmadole]

@crowlKats if you can provide a more complete example (with all the files needed to try the build) we'll take a look!

[crowlKats]

@robmadole due to the fact that it is a project for a business, i cant show the full project source code, so i took away as much as possible unrelated code to the issue. Here is a bare-bones repo i just made from the relevant files for this problem (of course i checked if the issue still occurs and it indeed does). i hope this helps.

[crowlKats]

@robmadole due to the fact that it is a project for a business, i cant show the full project source code, so i took away as much as possible unrelated code to the issue. Here is a bare-bones repo i just made from the relevant files for this problem (of course i checked if the issue still occurs and it indeed does). i hope this helps.

actually to make this easier: here i made a react project with just using fontawesome to prove that tree shaking isnt working with fontawesome, but included also a bit of lodash-es to prove that tree shaking indeed works in the project

[rkovalyov]

@crowlKats, @robmadole have the same issue with my webpack config, threeshaking doesnt work with "@fortawesome/pro-light-svg-icons": "5.12.1",

unfortunately 👎 need import by fullpath
import { faLongArrowDown } from "@fortawesome/pro-light-svg-icons/faLongArrowDown";
instead of
import { faLongArrowDown } from "@fortawesome/pro-light-svg-icons";

---

include all icons in bundle 👎Ex:

import { library } from "@fortawesome/fontawesome-svg-core";
import { faLongArrowDown } from "@fortawesome/pro-light-svg-icons";

library.add(faLongArrowDown);

Edited:
I made a lot of test,
@robmadole I confirmed tree shaking works well 👍 ,
webpack-bundle-analyzer("3.6.0") confused me as well,
stats size ( the size of the chunk before Webpack has performed any magic on it.) displays different result for
import { faLongArrowDown } from "@fortawesome/pro-light-svg-icons";
and
import { faLongArrowDown } from "@fortawesome/pro-light-svg-icons/faLongArrowDown";
but parsed size (the size of the processed chunk ) has correct size for both examples.

[robmadole]

@crowlKats the fortawesome chunk is 31.8K. Tree-shaking is working and only the 3 icons you included are being bundled. What am I missing?

[crowlKats]

not sure what kind of magic you've done, because for me it is still the same with that repo

[robmadole]

@crowlKats please look at the _actual_ file size (not through bundle analyzer). How big is it?

[rkovalyov]

@crowlKats treeshaking works well, I was also confused with webpack-bundle-analyzer.
stats size - the size of the chunk before Webpack has performed any magic on it.
You need check parsed size.

[tagliala]

I'm going to close here, since the sideEffects option has been added in FA 5.12.0

If someone is still experiencing issues, please open a new thread and provide a reproducible test case