New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Huge file size when using webpack #356

Closed
loremipson opened this Issue Jun 9, 2016 · 11 comments

Comments

Projects
None yet
9 participants
@loremipson

loremipson commented Jun 9, 2016

Hey everyone,

This has been boggling my mind for the majority of the day. I'm getting several hundreds of kb added to my output file when importing moment-timezone.

A couple of quick mentions to get out of the way. I am already using both: devtool: 'source-map', and setting the NODE_ENV to production in Webpack.

Without moment-timezone, my javascript file output size is 35.9kb, but once I import it, it jumps up to 700kb. This is bizarre, because even when I just require the moment-timezone-with-data-2010-2020.min file, I'm getting the same result, even though that file is only ~35kb itself. Is this then just coming from other dependencies at that point?

I've tried importing it the following ways:

import moment from 'moment-timezone'; // Adds ~640kb to my output
import moment from 'moment-timezone/builds/moment-timezone.min'; // Adds ~475kb to my output
import moment from 'moment-timezone/builds/moment-timezone-with-data-2010-2020.min'; // Adds ~503kb

The first one should only be pulling in moment-timezone.js (13.5kb) and then loads in data/packed/latest.json (176kb), which is expectedly high, but not 500kb+ high. I'm just not sure where the rest of that is coming in.

To me, I have to be missing something obvious here. I hope I am, anyways. 700kb will force me to go a different route for what I'm trying to do. Is anyone else experiencing this large of an output?

Thanks ahead of time.

@goldensunliu

This comment has been minimized.

goldensunliu commented Jun 10, 2016

@loremipson by requiring 'moment-timezone' it will also pulls in 'moment'

module.exports = factory(require('moment')); // Node

in order to keep the bundle small make sure when you are requiring moment add this to ur webpack plugins:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
http://stackoverflow.com/questions/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack

@loremipson

This comment has been minimized.

loremipson commented Jun 13, 2016

Thank you for that. This has brought it down to ~200kb now. Still not ideal, but I'll do some further playing around to see if I'm pulling too much data in from here. This is a definite start.

Thanks again

@loremipson loremipson closed this Jun 13, 2016

@goldensunliu

This comment has been minimized.

goldensunliu commented Jun 13, 2016

@loremipson chance is it is gonna be a lot smaller after minification and gziping. I wouldn't worry about it as much.

@rpeden

This comment has been minimized.

rpeden commented Aug 22, 2016

@loremipson If you don't need to use all of the time zones in the world, you could also try excluding the latest.json file that moment-timezone uses, and use your own that only includes the time zones you need. Doing this reduced my minified JavaScript by 280k.

Apologies for the late reply, but this issue came up on Google when I encountered the same thing you did, so I just wanted to mention it in case it's useful to any future visitors.

@ParishKhan

This comment has been minimized.

ParishKhan commented Jan 24, 2017

Still, the size is huge. It's good for server side. But not as a client side.

@Peleg

This comment has been minimized.

Peleg commented Jun 23, 2017

@rpeden great solution! fwiw, this is what we ended up adding to config.plugins in our webpack config file:

new webpack.NormalModuleReplacementPlugin(
  /moment-timezone\/data\/packed\/latest\.json/,
  require.resolve('./misc/timezone-definitions')
)

and then we just added a custom timezone-definitions.json file with only the timezones we were using.

carlmjohnson added a commit to baltimore-sun-data/track-changes that referenced this issue Nov 17, 2017

JS: Add pretty dates with moment.js
Moment.js is huge, so I'm dropping locale info.

See moment/moment-timezone#356

carlmjohnson added a commit to baltimore-sun-data/track-changes that referenced this issue Nov 17, 2017

JS: Add pretty dates with moment.js
Moment.js is huge, so I'm dropping locale info.

See moment/moment-timezone#356
@jonathandion

This comment has been minimized.

jonathandion commented Jan 19, 2018

@Peleg Can you provide an example? What is the difference between "meta", "packed" and "unpacked"?

In my case I just want America/Montreal

Thanks

@mclassdesigns

This comment has been minimized.

mclassdesigns commented Feb 25, 2018

I have a custom time zone definitions file that's working great for all American time zones using @Peleg 's method above, but can anyone give me a hint as to how handle cases when someone is outside those time zones?

Say, an employee travels to Europe, Momentjs will throw an error saying the time zone was found in the Intl api, but did not have that data loaded.

@orzechowskid

This comment has been minimized.

orzechowskid commented Mar 2, 2018

I think you handle it by including European timezones in your custom definitions file (or loading it via code-splitting somehow).

@mclassdesigns

This comment has been minimized.

mclassdesigns commented Mar 5, 2018

Hm, loading through code-splitting... you might be on to something.

@pretorianec

This comment has been minimized.

pretorianec commented Nov 27, 2018

@Peleg Could you give an example of your timezone-definitions.json? - whenever I edit the packed version it breaks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment