Modulize Highchart? Tree shaking capability.

[envil]

I'm using Highcharts and Highstocks with Angular in my application. The functionality is good, however it's impossible to optimize the bundle size of Highcharts:
Take look at this screenshot of my application bundle information:

You can see that Highcharts ate up to nearly 500kb (dark blue outline), even bigger than a chunky framework like Angular (red outline). Even if one uses only one chart in Highcharts, they have to carry on all of the Highcharts code, which is unacceptably unoptimized.

The solution I know here is to modulize Highcharts so that one can only import what they need. Also with new Webpack Tree Shaking, the bundle size will be reduced vastly.
I know this cannot be fixed soon but are you guys thinking about it?

[sebastianbochan]

Hi @envil,
At the begining I advise you to load only highstock.js which includes all Highcharts' features. You can also build your custom file by our tool here:

• https://www.highcharts.com/download

[pawelfus]

Highcharts lib is already modularized: https://www.highcharts.com/docs/getting-started/how-to-create-custom-highcharts-files

[envil]

Thank you for your responses.
I'm looking at the custom build feature. It gives me a highchart-custom.src.jswhich is not convenient to use at all since it's not a node_modules, so I cannot import it to my Angular application in a regular way. And all the type definitions for the typescript are gone.

[envil]

Also what I mean is ES module, completely independent and can be imported to other ES modules. See how lodash and date-fns have defeated underscore and momentjs, one of the most important factor is the modularization capability like this.

[TorsteinHonsi]

@jon-a-nygaard FYI

[GeorgeKnap]

I am running into this as well.
I tried to go around with import * as Highstock from 'highcharts/highstock'; but it has no effect whatsoever.

[jon-a-nygaard]

Hi, a while back we started publishing our parts files as ES modules which means you can do import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js'. This may help some on the issue.

We are also currently working on making these parts files more standalone, which should improve tree shaking capabilities. It is a bit difficult at the moment to give a good ETA for when this will be published, but I will keep you updated as soon as I know some more.

[ymanvieu]

hi,

i'm using only 'stockChart' type and ran into the same problem, but found a solution described here :
https://github.com/highcharts/highcharts-angular#core

import * as Highcharts from 'highcharts';
import Stock from 'highcharts/modules/stock';
Stock(Highcharts);

instead of :
import * as Highcharts from 'highcharts/highstock';

now in bundle, its look like this :

[fantapop]

I'm using highcharts-react which uses the import * syntax. I'm not giving up yet but i've been unable to get tree shaking working for it so far.

https://github.com/highcharts/highcharts-react/blob/08cd61ca178276d716ae65fba76e1d07924b2838/src/HighchartsReact.d.ts#L6

[arialpew]

My current workaround : Alias Highcharts module into Highstock module.

You can use both chart type (Highcharts/Highstock) and it lower bundle size 🥇 .

This can be done with Webpack (check "resolve.alias" in Webpack documentation for more information) :

    alias: {
      highcharts$: 'highcharts/highstock.js',
    }

You can do aliasing with Babel to (babel-plugin-module-resolver).

Would be nice if we can modularize the whole lib.

[pawelfus]

Note that Highstock can be loaded as a module to Highcharts, using modules/stock.js module. Like mentioned above:

import * as Highcharts from 'highcharts';
import Stock from 'highcharts/modules/stock';
Stock(Highcharts);