Dynamic javascript loading as needed
Good day colleagues.
Allow me to suggest optimizing the loading of your modules using tools such as script async and defer. I tried to independently select the optimal sequencing of script downloads, but unfortunately, your modules refuse to work.
For example, I need to load 1 base library (highcharts) and 3 additional modules (export, offline export, wind barb), according to your documentation, I need to add 4 synchronous download scripts to the website header, which significantly slows down the loading of my website and spends browser resources wasted, because I need the output of graphs only at the command of the user, and not immediately when loading the site.
The best solution would be to dynamically load the modules needed for a particular type of graphics using DOM, rather than loading them synchronously when opening the site as is done now.
In addition, for different types of charts, I need to load different modules and I would like to do this dynamically as needed so as not to waste resources, especially on weak client PCs with unstable Internet connection (for example, 3G modems).
Thanks.
narodmon
shared this idea
I think for your use case, it is better to load the scripts dynamically rather than using script tags and async/defer. Using async/defer there is no guarantee the scripts are executed in order, which may impose a problem since the modules depend on highcharts.js.
A better way would be to use require.js to load them async, see https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/amd/simple/. Or to load the ES modules directly, see https://api.highcharts.com/class-reference/#toc4