tree-shaking

[daniele-zurico]

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.1.1
node: 7.5.0
os: darwin x64

Hello all,
I'm struggling with tree shaking because it looks like that it doesn't work properly.
after running the follow command:
"bundle-report": "ng build --prod --target=production --environment=prod --aot --stats-json && webpack-bundle-analyzer dist/stats.json",

I realised that my vendor is: 2.4 MB and contain stuff that I don't use. RxJs for example take:

But in my code I use like that:

I'm doing something wrong or something wrong is in the tree shaking?

[bboehm86]

The very same goes for Angular Material. Once upon a time.. it worked.. I just got the Components that I imported but now it's the whole shabang lurking around the vendor.ts.. sadly I do not rly know when it stoped working.
(If I remember correctly it was back then when we still got the ngfactorys and styles of the Components in our chunk files)

Demo App to try out: https://github.com/bboehm86/mat-chunk-test

[dojchek]

Can confirm the same for Lodash. Can't tell if it worked on earlier versions, since I used to use full import on lodash.
With optimized imports:

import { first } from 'lodash';
import { mapValues } from 'lodash';
// ...

I still get the whole lodash lib loaded in..

@angular/cli: 1.1.0
node: 7.4.0
os: win32 x64
@angular/*: 4.1.3

[galuszkak]

@daniele-zurico @dojchek @bboehm86 I think your issue is duplicate of this:
#2901

The Angular CLI team said it's webpack issue therefore it should be reported there and track there. (webpack/webpack#2899).

The sad thing is that issue in webpack is open for 10 months now and doesn't seem to go anywhere.

These led me to believe that maybe CLI should be discourage for use in production, as it clearly doesn't do it's job and making really big bundles. I'm also struggling because of that issue as it's impacting performance a lot. If you are using Angular lazy loading ( loadChildren in router) it's even worse because chunks are really big (1 mb each piece of really small modules), that you get 9 Mb bundle of 5 mb vendor and 4 mb of modules (so sum is 9). Without lazy loading it's little better because you have 5-6mb depending on code base, but still quite not what I expect as I'm using really only small part of RxJS and angular material.

[delagen]

I think it's problem with webpack config.
I use own process as ngc=>webpack so result is normal

[galuszkak]

@delagen as far I remember problem was with UglifyJS. Is that included in your webpack config?

See relevant threads:
webpack/webpack#2867 webpack
mishoo/UglifyJS#1261 UglifyJS2

[delagen]

@galuszkak This diagrams for minified code with uglify, tried to use Closure, but no success. Uglify works

[delagen]

I think in webpack config does not added 'module' field to resolve section, this is why modules resolved via main field and es6 modules does not used

[delagen]

Ps may be it left for performance? With real tree shaking my project build up to 20!!! minutes with webpack. May be with rollup will be faster

[filipesilva]

Webpack defaults to resolving module first and only main after that, so we don't specify it ourselves.

So I'm trying to test this, and to do so I did npm i source-map-explorer and added this npm script:

"sme": "ng build --prod --sm --output-hashing=none && source-map-explorer ./dist/vendor.bundle.js ./dist/vendor.bundle.js.map"

I use source-map-explorer because webpack-bundle-analyzer seems to not be working with the latest webpack. Vendor chunking is disabled so everything shows in the same bundle for analysis.

Running this script on a brand new project, and zooming in to rxjs and then operator I see four: mergeAll, merge, multicast, share. Total size 2.28kb.

Then on main.ts I add import 'rxjs/add/operator/switchMap';, run the script again.

Now there are five operators, the same as before plus switchMap, total size 3.75kb.

This to me seems like the tree shaking available in webpack is working correctly - only the operator I asked for was added.

I cannot speak for Material, but they seem to have an issue opened for how their packaging format is amenable to tree shaking: angular/components#4137.

For the other example provided here (rxjs, lodash), I'd say that your app might not be using the other operators but a third party library is, and so they get included.

[delagen]

@filipesilva RXJS fine

but @angular/* not

[filipesilva]

@delagen those are the correct files for @angular/*. If you open their package.json you will see "module": "./@angular/core.es5.js",.