You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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.
The text was updated successfully, but these errors were encountered:
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.
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
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:
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.
The text was updated successfully, but these errors were encountered: