angular-highcharts
angular-highcharts copied to clipboard
Switch to module imports for smaller bundle size
This PR significantly reduces the bundle size of the library (from ~1280KB -> ~490KB) without breaking changes.
If you take a look at https://github.com/highcharts/highcharts-angular#highcharts-instance-details, you can see that users are meant to choose a single Highcharts core from highcharts
, highmaps
, highstock
, and highcharts-gantt
. If you want to use features from multiple cores, you should choose Highcharts and then use modules to add on the additional feature sets. This is what this library currently does.
However, the chart classes currently use the core imports instead of the module imports. The core imports are much larger (as they contain duplicate code), and 3/4 of them aren't actually being used at runtime. I switched the imports over to use the modules, and it's helped reduce the bundle size significantly:
(screenshots from the sample app analysed with source-map-explorer
)
Before:
After:
It would be great if someone could test this out on their existing Highstocks/Highmaps/Highcharts Gantt app to make sure that nothing breaks.
I also made a branch which uses secondary imports to support the use of alternative core modules and tree shaking, but it would have been a major breaking change. I'm happy to clean that branch up if there's interest, but this gets us 80% of the way there practically for free.
nice, i will have look when im back from vocations.
Also when im trying to load a StockChart as in the Demo ng serve -o
, the StockChart does not render.
core.js:5967 ERROR TypeError: Cannot read property 'stockChart' of undefined
at StockChart.init (angular-highcharts.js:143)
at ChartDirective.init (angular-highcharts.js:230)
at ChartDirective.ngOnInit (angular-highcharts.js:222)
at callHook (core.js:2486)
at callHooks (core.js:2456)
at executeInitAndCheckHooks (core.js:2408)
at refreshView (core.js:9194)
at refreshEmbeddedViews (core.js:10299)
at refreshView (core.js:9203)
at refreshComponent (core.js:10345)