[nightly/Ionic 3] All moment.js locales are included in the bundle

[peterpeterparker]

Short description of the problem:

I'm trying the Ionic 3 beta and using the last ionic-app-scripts. Seems like all moment.js locales are now included in the build.

Since I upgraded the Ionic side, I allowed my self to open this issue, to first check with you, if you think that there are solutions on your side or not. Thx in advance for the consideration and your time.

What behavior are you expecting?

Only the locales I used should be included.

Which @ionic/app-scripts version are you using?

Nightly

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.0-beta.3
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.2.5
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.2.1
Xcode version: Xcode 8.3 Build version 8E162

Screenshots:

Before:

Now:

[Manduro]

@peterpeterparker How exactly are you importing moment and the locale you want to use?

[peterpeterparker]

@Manduro in app.component.ts:

import moment from 'moment';

import 'moment/locale/fr';
import 'moment/locale/de';
import 'moment/locale/it';

as you see, only default (english) + three languages and not all languages as screenshot above

like displayed in my screenshots, worked fine before the upgrade

[Manduro]

@peterpeterparker I can confirm the same here. All locales are included even when I don't import any.

[peterpeterparker]

@Manduro thx for double checking it

[danbucholtz]

This is a Webpack issue. I'm not sure what we can do to fix it.

Is moment absolutely required for your app? I feel like there are constantly issues like this with it.

Thanks,
Dan

[peterpeterparker]

@danbucholtz Kind of a must unfortunately, calendar has a big role in my app.

Last time I checked, date-fns wasn't fully french compatible (wich may be ok now) but also hadn't a "like moment.js - Calendar Time display", wich seems to be still not possible :(

[danbucholtz]

@peterpeterparker,

Didn't we fix the same thing like a month ago? Nothing changed on our end so that is strange to say the least. Did Moment update?

Thanks,
Dan

[peterpeterparker]

@danbucholtz Yep, something like one month ago, that's why also I ask you first before somewhere else and also because you fixed #848 yesterday, thought maybe it's related.

Between the two screenshots I added to that issue, I could confirm that I neither upgraded the version of moment.js or changed my code. I just upgraded Ionic beta 3 and app-scripts nightly, that's all. I tried two times back and forth before opening an issue.

[peterpeterparker]

Just checked my git history, in february I fixed kind of the same problem. I was importing locales like

import 'moment/src/locale/fr';

which actually was wrong and produced a loading of all locales. I switched then to

import 'moment/locale/fr';

wich solved the issue and allowed my app to only load the locales I need. I still use that code in that form.

[danbucholtz]

This is nothing we can do about this at this time. The answer is for moment to use static imports instead of require(./locale/' + name) for a require. dynamic requires are the culprit here.

See this post here:
angular/angular-cli#2496 (comment)

angular/angular-cli#5166
http://stackoverflow.com/questions/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack/25426019#25426019

Please use date-fns.

Thanks,
Dan

[peterpeterparker]

@danbucholtz thx for taking time to check if there are solutions. Gonna look what I can do.

Like I said, some calendar features are missing in date-fns therefore can't use it at this time.

[danbucholtz]

@peterpeterparker,

Do you need moment immediately on app start-up? You could consider lazy loading it. I can experiment with that if you'd like.

Thanks,
Dan

[peterpeterparker]

@danbucholtz right now yes I use it on start-up but maybe I could do differently. I've to think about my options first.

It was really nice from you to invest time in this subject, thx a lot for the help!

[Manduro]

@peterpeterparker Have a look at this issue: urish/ngx-moment#127 (comment)

Using a custom webpack config with this line included fixed it for me. It now only adds the locales I'm specifically importing, saving ~300kB :)

[peterpeterparker]

I've to be honest with you @Manduro...I love you ;)

It works like a charm, thx a lot!!!