Custom bundle build

[KarelWintersky]

Feature Proposal

Is it possible to create a custom build of library. Without all fuctionality, for example, only for pie chart?

Possible Implementation

Script (or site with checkboxes) for building custom bundle.

[LeeLenaleee]

You can use three shaking to get rid of all the parts you don't need:

https://www.chartjs.org/docs/latest/getting-started/usage.html#tree-shaking

https://www.chartjs.org/docs/latest/getting-started/integration.html#bundle-optimization

[jasonpolites]

I am also trying to do this, but when using webpack to bundle, I still get the full whack of chart.js included.

import {
  Chart, 
  BarController, 
  BarElement, 
  CategoryScale, 
  LineController, 
  LineElement, 
  LinearScale, 
  PointElement, 
  Tooltip,
  Legend} from 'chart.js';

Chart.register(
  BarController, 
  LineController, 
  CategoryScale, 
  LinearScale, 
  PointElement, 
  LineElement, 
  BarElement,
  Tooltip,
  Legend);

Then Webpack says:

modules by path ./node_modules/chart.js/dist/ 486 KiB
    ./node_modules/chart.js/dist/chart.js 393 KiB [built] [code generated]
    ./node_modules/chart.js/dist/chunks/helpers.segment.js 92.6 KiB [built] [code generated]

This seems to still be pulling in the entire module.

There doesn't seem to be anything in the docs (https://www.chartjs.org/docs/latest/getting-started/integration.html) to suggest if there's an additional webpack config needed. I tried the webpack docs for "tree shaking", but nothing obvious there seemed to work.

Some additional docs to go with this might be helpful

[LeeLenaleee]

do you have a sample of this?

[jasonpolites]

I don't have an isolated sample for repro, no. But the fact that you're asking tells me this is not expected. I'm also not 100% sure this is what is happening, it's difficult to determine what is actually going on because of course the JS bundle created by webpack is not really human-readable so it's hard to know if it's pulling in more than I expect.

In the past hour, I've been experimenting with various webpack config options, and nothing really changed, but I am fairly confident that the tree-shaking is working, it's just not doing as much as I think I expected.

My code is about 120 KiB in total (not all of it used right now). The final bundle I get if I use the "tree shake" variant of Chart.js I included in my previous comment is 226 KiB. If I change the one file that imports Chart.js to instead be import Chart from 'chart.js/auto', the final bundle is 274 KiB.

So yes, the tree-shake version is actually smaller, by about 50KiB. I guess I ended up importing most of the module anyway?

FWIW, the part of webpack that was throwing me off was the WebpackObfuscator, which (perhaps unsurprisingly) doubles the size of the JS file because obfuscation is better known as Bloaty McBloatface. I didn't spot this initially, so when my final bundle was close to 600KB I went looking for the largest culprit and this looked like Chart.js.

I think the output from webpack is just listing the size of the file on disk (chart.js), not the size of the content from chart.js that it bundled, which was also throwing me off

[KarelWintersky]

@LeeLenaleee looks like blackmagic of frontend-yarn-node-etc.

But what should those who are not professional front-end developers do, but simply want to use one and only one functionality from the entire power of the library - a pie chart?

Unfortunately, I have absolutely no idea how to cook this dish. :cry: