I’m using chart.js but when I bundled it using webpack in my project (react-app), I saw it has a single javascript bundle in the dist folder. Below is the analyzer for the same.
Bundle-Analyzer for chart.js
It’s taking approx. ~73 kb (gzipped). When I checked its rollup config, preserveModules: true
was not there.
So I wanted chart.js to use preserveModules: true
so that I’ll have multiple smaller chunks (for Line, Bar, etc.) and I don’t have to load a 73kb file in the client.
I was thinking of publishing the chart.js (with preserveModules: true
) in our internal npm domain. But not sure how can we do this with just our app using webpack/rollup bundle.
Also, why are chart.js authors not tree-shaking this library or am I missing something?
I tried updating the rollup config for chart.js with preserveModules: true
and on building, it’s giving individual small js chunks for all the dir/files (based on src
). That would solve if they added this feature. It’s just that I need to update my all imports to import LineController from 'chart.js/controller/controller.line'
.
The expectation is to either have this functionality in chart.js (or maybe with using webpack) or any other way around not to load the entire big chart.js (of ~73 kb). I’m just using the Line & Bar chart.