Skip to content
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

Optimize or Replace Moment.js #51

Open
heathharrelson opened this issue Jul 13, 2018 · 2 comments
Open

Optimize or Replace Moment.js #51

heathharrelson opened this issue Jul 13, 2018 · 2 comments

Comments

@heathharrelson
Copy link
Member

While doing some profiling with webpack-bundle-analyzer, I noticed that Moment.js is a significant fraction of our bundle size, largely because all of the locales are included:

State Total Bundle Moment.js Percentage
Uncompressed 2099.2 KB 528.35 KB ~25%
Compressed 458.31 KB 92.81 KB ~20%

Even worse, Moment.js is bundled in Chart.js, so we take the hit twice.

Neither our code, nor the code in Chart.js uses Moment's locales, so we could just strip them out of the bundle using Webpack:

https://github.com/jmblog/how-to-optimize-momentjs-with-webpack

Chart.js comes in two releases: a version with Moment.js bundled in (what we're using now), and a standalone release that doesn't include Moment. Because Vizr doesn't use the time axis type (it constructs date strings for the axis), we may be able to simply switch to the standalone release.

As for Vizr itself, we might be able to replace Moment.js with Luxon, which has a similar API but supports tree-shaking for smaller build sizes.

@heathharrelson
Copy link
Member Author

heathharrelson commented Jul 13, 2018

In PR #53 I reconfigured Webpack to import the standalone version of Chart.js, which has eliminated the second copy of Moment.js. It's still probably worth doing an experiment with Luxon to see what improvements we can get.

@heathharrelson
Copy link
Member Author

After trying Luxon in PR #56, I think the appropriate solution here is to exclude the Moment.js locale files from the bundle using Webpack until we need them. See the following GitHub link for details: https://github.com/jmblog/how-to-optimize-momentjs-with-webpack

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant