Ngx-bootstrap: [Proposal] Remove moment.js from dependencies to reduce bundle size

Created on 5 May 2017  路  9Comments  路  Source: valor-software/ngx-bootstrap

I found only one place in source code where moment.js is used - https://github.com/valor-software/ngx-bootstrap/blob/27a022922370947d54c3cfd357399eb588e8d01f/src/datepicker/date-formatter.ts#L5
But it inflates every bundle with import {...} from 'ng2-bootstrap' by 452kb! (89kb with gzip)

webpack-bundle-analyzer report:
alt text

I propose to get rid of moment.js, instead we can use native Date() objects or date-fns, as it is modular and much smaller.

comp(datepicker)

Most helpful comment

removed in v1.9.0 ;)
plus added new datepicker (new style and pop up version)
check this out: http://valor-software.com/ngx-bootstrap/#/datepicker#examples

All 9 comments

If it's only a matter of formatting date as text, this library could rely on Angular DatePipe as in date => datePipe.transform(date, dateFormat); with its own set of format specifiers.

Initial intent to use it was localizations it provides

I think 452kb is too high cost for it.

Are you realy think this is a good solution? Not all uses webpack, not all will even know why bundle size increased and will found this workaround. In my opinion would be better if ngx-bootstrap was optimized by default, for any build tools.

Any bundle could be good for all tools, and yes will be optional later

@valorkin thanks for sharing the intent. Is localization going to be implemented soon? If not, removing dependency from momentjs could be an instant improvement.

If localization is going to be implemented in near future, have you thought about possible alternatives? Like taking advantage of Angular DatePipe own localization for string conversion? Are there other requirements for localization? Maybe something about translating days of the week an month names: there could be some other lighter implementation available already.

+1 to have it removed.

removed in v1.9.0 ;)
plus added new datepicker (new style and pop up version)
check this out: http://valor-software.com/ngx-bootstrap/#/datepicker#examples

Was this page helpful?
0 / 5 - 0 ratings