search

valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.53k stars 1.69k forks source link

Aot Bundle size #1538

Closed olaf89 closed 7 years ago

olaf89 commented 7 years ago

Hello, while i was investigating my bundle size using aot build version. I noticed that even when using only one module from ng2-bootstrap the whole library is added as well as moment.js. This makes it quite heavy. Is there any way to improve this? For example changing commonjs modules to ES2015 so it can be tree shaken? Or do you have any other advice which would help with this issue? This is how adding alert module influenced angular2 webpack starter bundle size (aot prod build) : image

valorkin commented 7 years ago

yes, it should work I just checked, and ng core modules switched to es6, so we switch too

valorkin commented 7 years ago

waiting for CI to pass...

valorkin commented 7 years ago

tests are passing but, sourcemap-istanbul-instrumenter-loader failed

valorkin commented 7 years ago

released as v1.3.0 please try and update me

olaf89 commented 7 years ago

Hey, wow thanks for such a quick feedback great stuff! Unfortunately it does not seem to work as i would expect. When importing only alert Module using angular2-webpack-starter (aot): version: Bundle size 1.2.6: 126.8kb 1.3.0: 117.96kb But overall looks like all not used modules are included in bundle. Screen for 1.3.0: ng-bootstrap1 3 0

ctrl-brk commented 7 years ago

@olaf89 Btw, what software did you use to produce that pic?

olaf89 commented 7 years ago

@ctrl-brk im using webpack-bundle-analyzer

GuskiS commented 7 years ago

Woah, nice tool :O For me, ng2bs is using only used packages, not sure if it is because of tree shaking or because I'm importing it directly - ... from 'ng2-bootstrap/datepicker'

valorkin commented 7 years ago

@olaf89 please try v1.3.2

olaf89 commented 7 years ago

Hello, @valorkin I tried but when importing from 'ng2-bootstrap' still whole library is included as well as moment.js.

BUT when tring to do it @GuskiS way (by importing from 'ng2-bootstrap/alert') the result is amazing: not only all not used modules are dropped but also moment.js Result: bs-alert

valorkin commented 7 years ago

This is awesome! Moment is required only by datepicker

GuskiS commented 7 years ago

@valorkin Do you plan to remove momentjs in future?

valorkin commented 7 years ago

More likely to make it optional It provides localization, so it is pretty good

alexlovato303 commented 7 years ago

@valorkin I recently had issues with moment in a webpack build for angular2. If it's included in an eager module webpack for some reason will not produce chunks for lazy routes