Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch to module imports for smaller bundle size #372

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

finn-wa
Copy link

@finn-wa finn-wa commented May 31, 2021

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:
master

After:
reduce-bundle-size

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.

@cebor
Copy link
Owner

cebor commented Jun 4, 2021

nice, i will have look when im back from vocations.

@cebor
Copy link
Owner

cebor commented Jun 8, 2021

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants