Dist scripts are really heavyweight

[arqex]

How can the singleton scripts in the /dist folder be so big?

https://github.com/Hacker0x01/react-datepicker/blob/master/dist/react-datepicker.js is almost 500KB.

[eliseumds]

The distribution build is definitely wrong. It includes https://github.com/HubSpot/tether and https://github.com/lodash/lodash. Shouldn't be a problem if you are using Webpack and Dedupe Plugin, but it can be annoying. One could either:

• Define both modules as externals in webpack.config.js (just like it was made for React, Moment and React-OnClickOutside)
• Or split the code in app and vendor builds

[martijnrusschen]

Ah, yeah that's related to #122. I was thinking about what dependencies should be peer/external dependencies and which one should be like the normal dependencies. Any thoughts?

[eliseumds]

I think lodash and moment could be good peer dependencies. And there could be multiple distribution bundles.

As I said, Webpack users shouldn't have big problems, but not everyone uses it. One thing that can reduce the bundle size a lot is requiring specific lodash modules instead of the whole library. Example:

import sortBy from 'lodash/collection/sortBy';

sortBy([...], 'fieldA');

The same can be done with moment, so, even if the developers don't have these dependencies already installed, using react-datepicker wouldn't add up much to their final build.

[eliseumds]

Oh, sorry. It's actually not possible yet to import moment modules like that. There's an issue (moment/moment#2373) regarding it.

[RSO]

react-datepicker.js is now 18kb, does this solve this issue?

On a separate, somewhat related note: I'm also going to remove the example from this repository and instead turn it into a github page, this aught to clean up the PRs a lot.

[RSO]

A little more info on what I did to make the file smaller: in webpack.config.js we now state that all external libraries are in fact expected to be available already (React, Moment, react-onclickoutside, Tether and lodash). This means that the file now only holds datepicker specific code.

[arqex]

Hi @RSO,

Great news you made the datepicker so lightweight!

As for what to put in the build, it is complicated to decide what to leave out. In your case I think it should be a great idea to leave react-onclickoutside and Tether. There is a big chance that the datepicker is the only lib that use them and they are not big enough to be a problem if they are repeated.

In the timepicker put react-clickoutside and object-assign inside the bundle.

Cheers

[eliseumds]

@arqex 👍

[RSO]

As for what to put in the build, it is complicated to decide what to leave out. In your case I think it should be a great idea to leave react-onclickoutside and Tether. There is a big chance that the datepicker is the only lib that use them and they are not big enough to be a problem if they are repeated.
I think this is all personal preference (I just noticed that HackerOne had two copies of Tether inside its packed JS because of the way we packaged the lib), that's why I think it would be best to just defer all dependency loading to the user. That way the user has all control.

The scary part here really is that H1 uses underscore in it's codebase :) let's hope that we don't use any lodash-specific methods in the datepicker ;-)