search

OCTRI / REDCap-Vizr

A REDCap external module to visualize project data over time.
BSD 2-Clause "Simplified" License
6 stars 3 forks source link

Optimize or Replace Moment.js #51

Open heathharrelson opened 6 years ago

heathharrelson commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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