[change] Reduce library size #392

[codesankalp]

Checklist

• [x] I have read the OpenWISP Contributing Guidelines.
• [x] I have manually tested the changes proposed in this pull request.
• [x] I have written new test cases for new code and/or updated existing tests for changes to existing code.
• [x] I have updated the documentation.

Reference to Existing Issue

Closes #392

Description of Changes

Use chunk splitting, dynamic loading and removed unused examples to reduce library size.

https://github.com/openwisp/netjsongraph.js/pull/425#issuecomment-3564156079

[codesankalp]

The main problem I see is that now yarn build produces multiple files, which doesn't make it easy for us to drop the resulting work in OpenWISP. Is this on purpose?

Yes, there are several reasons for this approach:

1. Independent library caching - Libraries like ECharts and Leaflet will cache separately, independent of the netjsongraph codebase
2. Efficient updates - New releases or code updates won't require re-downloading unchanged libraries
3. Parallel loading - Modern browsers support concurrent chunk downloads, significantly improving load times
4. Enhanced performance - Overall application performance will improve
5. Selective loading - Load only required dependencies (network topology needs only ECharts, while map features require Leaflet as well)

The contenthash in filenames will optimize CDN cache management when using cdn (if we are using cdn).

Integration Considerations:

1. Since we maintain the codebase, updating it to support multiple JavaScript files would be ideal. However, if this isn't feasible, I can make the chunk build process configurable through environment variables.
2. Else, we could create a netjsongraph-loader.js file that handles parallel chunk loading, requiring only a single script reference in the integration code.

let me know your thoughts!

[codesankalp]

New Buid Sizes:

1. a result set providing the current output: all separate files -> 16.5kb + 324kb + 44.2kb
2. a result set providing the library + echarts -> 323kb
3. a result set providing the library + echarts + leaflet -> 366kb

[codesankalp]

Current Website Example - 450kB:

Size Reduction

1. With full build (leaflet included) - 216kB:

2. With echarts only build (leaflet loaded externally) - 181kB: