Locales for MomentJS are loaded when not used (v4)

[gmw-web]

(shameless copy+paste from my 'fullcalendar' GitHub issue. With a stripped down FullCalendar example (no Vue) the issue is not present. It appears to be vue-full-calendar related.)

According to the docs on locale...

When you load a FullCalendar locale file, it also loads the translations for MomentJS and jQuery UI Datepicker...

Expected behaviour:

Without any locales set, only the default locale (English) should be loaded for MomentJS. When loading one or more FullCalendar locale files, the related locale files for MomentJS should get loaded, but only those (no more, no less).

What's happening now:

All locales for MomentJS appear to be loaded regardless.

Details:

I'm using the following in a stripped down example found here:

"dependencies": {
  "vue": "^2.5.2",
  "vue-full-calendar": "^4.0.0-1"
},

Futhermore, in the example I cleared the list of events and removed the moment.js import in App.vue and I removed the jquery references in webpack.base.conf.js.

When analyzing the Webpack bundle from this example and even without any locales set for the FullCalendar instance (thus relying on the default English setting), it appears that all locales for MomentJS end up in the final package, resulting in a JavaScript file that's much larger than needed.

[BrockReece]

Hi @gmw-web

It looks like you are using the prerelease that isn't quite ready yet. Can you try using a 2.X version of vue-full-calendar?

[gmw-web]

I am indeed using the pre-release. I'd rather not use a 2.x version as this will bloat my build with jQuery.

Having said that;

"...With a stripped down FullCalendar example (no Vue) the issue is not present. It appears to be vue-full-calendar related."

(this is also when using a 4.x version)

I understand that the pre-release isn't really ready yet, but just wanted to give a heads up about the issue and hoped this would be something easily fixable.

[slecorvaisier]

You can use this webpack plugin: https://webpack.js.org/plugins/context-replacement-plugin/#usage

In my setup (rails + webpacker), it looks like the following:

const { environment } = require("@rails/webpacker");

const webpack = require("webpack");

environment.plugins.prepend(
  "MomentContextReplacement",
  new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /nl/),
);

module.exports = environment;

With this code, only the nl and nl-be locales are included in my bundle. Hope it can help someone.