Build size increase by 200 kB

Hi,

I’m coming from the ng2-toastr package, and switched to ngx-toastr to get Angular 5 + 6 support. First thing: nice job, the API is clearer and easier to use 👍

Second: unfortunately the build size increases significantly (at least with Angular 5): around 200 kB.

My configuration:

• Angular 5.2.11
• @angular/animations installed
• TypeScript 2.5.3
• ngx-toastr 8.6.0

You can see that the vendor chunk increases in size:

	before (ng2-toastr)	after (ngx-toastr)
vendor.67ea4daf18307e76da79.bundle.js	818324 B	1047578 B
main.27254a9e6e1789b2cbd1.bundle.js	282681 B	281943 B
1.c6b6bf6d13ff8c5eb841.chunk.js	254196 B	253791 B

Analysis from webpack-bundle-analyzer: it says that ngx-toastr part of vendor is ~ 145 kB (as a comparison, ng2-toastr was 26 kB in the same analysis).

Last thing: the file node_modules/ngx-toastr/fesm5/ngx-toastr.js is 133 kB, and has 80 kB of comments at the end (for sourcemaps), that is (I guess) removed at compilation.

So where does this extra hundreds of kilobytes in the dist build come from?

Is there another way of importing that doesn’t include all the source code? I know that other libraries don’t recommend importing like import {...} from 'lib'; because it bloats the dist size. Instead they recommend: import {...} from 'lib/component';.

[adrienverge]

@scttcper thanks for your answer! Unfortunately this is not an issue about BrowserAnimationsModule. Our project included the animations module before, and still includes it. You’re right that including this module increases build size, but this seems normal to me.

The problem I’m describing here is that removing ng2-toastr and including ngx-toastr (no other modifications) increases the build size by ~ 200 kB!

	Angular 5	Angular 5
	with animations module	with animations module
	ng build --prod	ng build --prod--build-optimizer=false
ng2-toastr	5384044	5542662
ngx-toastr	5579409 (+ 195 kB)	5770818 (+ 228 kB)

As you can see on my webpack-bundle-analyzer screenshot above, it’s ngx-toastr that takes the extra 200 kB.

Could ngx-toastr include original JS files in the package (not just a ngx-toastr.js bundle), like many libraries do? (RxJS, ng2-toastr, Raven.js … see my previous post for an example) This would let webpack take just what is needed.

[scttcper]

I don’t think this should be happening on latest with angular 6. Also, the project is built with the “officially” recommended build tool https://github.com/dherges/ng-packagr so its pretty much up to them on how its shipped to users.

before (has animations module)

❯ ng build --prod

Date: 2018-08-14T07:41:54.220Z
Hash: 747c74d792df21bb05b5
Time: 25366ms
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.2f4a59095805af02bd79.js (polyfills) 59.6 kB [initial] [rendered]
chunk {3} main.fdb9bde1f800889081cd.js (main) 252 kB [initial] [rendered]

after adding ToastrModule

❯ ng build --prod

Date: 2018-08-14T07:43:22.117Z
Hash: 45c3f90b462a44dd222e
Time: 26292ms
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.2f4a59095805af02bd79.js (polyfills) 59.6 kB [initial] [rendered]
chunk {3} main.bc752138f4e35e86e77a.js (main) 270 kB [initial] [rendered]