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

Modulize Highchart? Tree shaking capability. #8667

Closed
envil opened this issue Jul 24, 2018 · 22 comments
Closed

Modulize Highchart? Tree shaking capability. #8667

envil opened this issue Jul 24, 2018 · 22 comments
Labels
Product: TypeScript Issues & enhancements related to TS/TypeScript Type: Enhancement

Comments

@envil
Copy link

envil commented Jul 24, 2018

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:
screen shot 2018-07-24 at 12 07 05 pm
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?

@envil envil changed the title Modulize Highchart? Modulize Highchart? Tree shaking capability. Jul 24, 2018
@sebastianbochan
Copy link
Contributor

sebastianbochan commented Jul 24, 2018

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:

@pawelfus
Copy link
Contributor

@envil
Copy link
Author

envil commented Jul 24, 2018

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
Copy link
Author

envil commented Jul 24, 2018

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
Copy link
Collaborator

@jon-a-nygaard FYI

@bre1470 bre1470 added the Product: TypeScript Issues & enhancements related to TS/TypeScript label Jan 17, 2019
@GeorgeKnap
Copy link

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
Copy link
Contributor

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
Copy link

ymanvieu commented Apr 29, 2019

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

@fantapop
Copy link

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
Copy link

arialpew commented Jun 12, 2019

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
Copy link
Contributor

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);

@mediafreakch
Copy link

mediafreakch commented Feb 28, 2020

@pawelfus Somehow that fails in my tests with: TypeError: Highcharts.stockChart is not a function

No type issues though and the application itself works too. I'm using jest. Any idea?

UPDATE
Found out that resolving the module differently in jest.config.js works:

  moduleNameMapper: {
    '^highcharts$': '<rootDir>/node_modules/highcharts/highstock'
  },

@Yohandah
Copy link

Any update on this ? Considering dropping Highcharts since it's really a HUGE library to import into my project :(

@bre1470
Copy link
Contributor

bre1470 commented Jul 20, 2020

Hi @Yohandah! We are about half way through, as you can see in #12738.

You can use most ES modules to tree shake. Though this is for the moment not officially supported (only masters), because we are moving and splitting files right now. So with the next release, paths in the example will be different.

import Chart from 'https://code.highcharts.com/es-modules/parts/Chart.js'
import SVGRenderer from 'https://code.highcharts.com/es-modules/parts/SVGRenderer.js'
new Chart('container', { /* ...options... */ });

https://jsfiddle.net/xtof0m14/

@petterw03
Copy link

Do you have any new ETA for this?

@KacperMadej
Copy link

Hi @petterw03

There is no ETA for a fix for this issue, but you could check the progress in #12738

Any comments @bre1470 ?

@bre1470
Copy link
Contributor

bre1470 commented Feb 11, 2021

Yes, here are some comments on this:

  • We have made significant process, but the file splits might be not final yet, but it is safe to say that the ETA is this year.
  • To be safe than sorry, stick to the modules in es-modules/masters for now as in the past.
  • We evaluate the possibility of a list of files, that already fulfill the requirements for ES6 and tree shaking. In about a week I might have more information regarding the list (not the list itself yet).

@petterw03
Copy link

How is the list coming along @bre1470? :) Waiting very eagerly!

@bre1470
Copy link
Contributor

bre1470 commented Mar 26, 2021

Hi, @petterw03!

We have created an internal list, which show important core components not ready for tree shaking. This makes unfortunately all useful module pathes incompatible. We will publish the list as soon as we have dependency trees (= series types) working with tree shaking.

If you have some specific series in mind, please let us know.

@bre1470
Copy link
Contributor

bre1470 commented May 21, 2021

Status update for tree shaking with master branch:

  • Core/Animation
  • Core/Axis
  • Core/Chart
  • Core/FormatUtilities
  • Core/Globals
  • Core/Legend
  • Core/DefaultOptions
  • Core/Pointer
  • Core/Renderer
  • Core/Responsive
  • Core/Series
  • Core/Time
  • Core/Tooltip
  • Core/Utilities
  • Extensions/Exporting:
  • Extensions/OfflineExporting:
  • Series/Bar
  • Series/Column
  • Series/Line
  • Series/Pie

Note: ETA for initial set above is July. Additional files/folders have to be made compatible as well.

@martinduparc
Copy link

Thanks for the update, @bre1470

@bre1470
Copy link
Contributor

bre1470 commented May 27, 2021

As mentioned by @hakimio, an alternative to do full ES6 tree shaking on highcharts/es-modules is the creation of a custom master package. That can help in the meantime and is explained in our docs: https://www.highcharts.com/docs/getting-started/how-to-create-custom-highcharts-files

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Product: TypeScript Issues & enhancements related to TS/TypeScript Type: Enhancement
Projects
None yet
Development

No branches or pull requests