Treeshake or reduce bundle size

[exitlol]

I've come across this "issue" that we are kinda interested in reducing bundle sizes. And apexcharts is 25% of our bundle size with is big (455KB). Chart is used in a variety of ways, but used in template reference as well.

I've read somehwere maybe the original js versions github, that a CDN import would be fine. However I don't know how to access the chart in the template since we cannot import the module which handles this for us. Is there a way to reduce bundle size in our angular 11 app, using angular built-in webpack, or some "hacking" around with the cdn import?

[junedchhipa]

Can you try loading from a CDN without a bundler?

import ngApexcharts from 'https://cdn.skypack.dev/ng-apexcharts';

[GrandSchtroumpf]

To enable treeshaking you should :

• build apexchart.js as an esm module (I saw a .esm.js file in the dist folder, so I guess it's already the case)
• use the esm import in the Chart component directly, instead of the using external link in the script.

To fully take advantage of treeshaking the apexchart.js shouldn't update the window object and should be more granular. For example the Treemap-squared should looks more like that:

class Container {
  constructor(public xoffset: number, public yoffset: number, public width: number, public height: number) {}
  ...
}
export function normalize() {}
export function treemapMultidimensional(...) {}

Then in the component you can import like that :

import { treemapMultidimensional } from 'apexchartjs';

Like that you only import the treemapMultidimensional function in the bundle size + it can be lazy-loaded so it's not included in the initial js file. This might imply creating different components to only load what you need though.

[MNorgren]

Any updates on this? apexcharts is 25% of my apps bundle size.