Angular 12 tree shaking not working correctly

[EusebiuDev]

Describe the problem

Bundle size is very big when using Explicit Reference. Did not test this with the Icon Library

What did you expect?

I did expect that unused icons are not in the final build.

Reproducible test case

Used webpack-bundle-analyzer and angular production build.

import { faCheckCircle, faClone, faLayerGroup, faTimesCircle, faQuestion, faStepForward } from '@fortawesome/free-solid-svg-icons'; -> Results in ~800kb size in the main.js file

import {faCheckCircle} from '@fortawesome/free-solid-svg-icons/faCheckCircle';
import {faClone} from '@fortawesome/free-solid-svg-icons/faClone';
import {faLayerGroup} from '@fortawesome/free-solid-svg-icons/faLayerGroup';
import {faTimesCircle} from '@fortawesome/free-solid-svg-icons/faTimesCircle';
import {faQuestion} from '@fortawesome/free-solid-svg-icons/faQuestion';
import {faStepForward} from '@fortawesome/free-solid-svg-icons/faStepForward';

-> Restults in ~97kb size

Versions

"@fortawesome/angular-fontawesome": "0.9.0",
"@fortawesome/fontawesome-svg-core": "1.2.36",
"@fortawesome/free-solid-svg-icons": "5.15.4",    
"@angular-devkit/build-angular": "12.2.8",

[devoto13]

It was not obvious to me how to use webpack-bundle-analyzer with Angular CLI, so couldn't really test it. Note though that you should look at the parsed/gzip values of their output because the stat will be huge (and that's expected).

I've run the source-map-explorer (the tool I'm more familiar with) on our demo app, which uses the import approach which you claim problematic and the icons were correctly tree-shaken away. Below are commands I've used and the result:

$ yarn build
$ yarn ng build demo --source-map
$ npm i -g source-map-explorer
$ source-map-explorer dist/demo/main-es2015.8755894896e58f603156.js

Please provide a runnable minimal reproduction and the exact commands I need to run to observe the problem if you still believe that tree-shaking is not working in your case.

[EusebiuDev]

I used the webpack-bundle-analyzer like: "bundle-full-report": "ng build --stats-json. && webpack-bundle-analyzer dist/stats.json"

I also used the source-map-explorer and I got the same results as you. Then I looked further into my webpack-bundle-analyzer settings and I noticed I had Show content of concatenated modules (inaccurate) turned on wich shows the stat size instead of the parsed/gziped even if the gziped option is selected.

Thank your for your help! problem exists between monitor and chair