[change] Reduce library size #392

[codesankalp]

Checklist

• I have read the OpenWISP Contributing Guidelines.
• I have manually tested the changes proposed in this pull request.
• I have written new test cases for new code and/or updated existing tests for changes to existing code.
• 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.

427kb -> 15kb

combined 44kb reduction if we consider echarts and leaflet as well

Screenshot

Before Optimizations:

After Optimizations:

[nemesifier]

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?

[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!

[nemesifier]

@codesankalp what do you think about the following?

1. a result set providing the current output: all separate files
2. a result set providing the library + echarts
3. a result set providing the library + echarts + leaflet

Can you add basic explanation about the above?

[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

[nemesifier]

I have the following problem:

yarn install
yarn install v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
error Error: https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.3.tgz: Request failed "404 Not Found"
    at ResponseError.ExtendableBuiltin (/usr/share/yarn/lib/cli.js:696:66)
    at new ResponseError (/usr/share/yarn/lib/cli.js:802:124)
    at Request.<anonymous> (/usr/share/yarn/lib/cli.js:66750:16)
    at Request.emit (node:events:519:28)
    at module.exports.Request.onRequestResponse (/usr/share/yarn/lib/cli.js:142287:10)
    at ClientRequest.emit (node:events:519:28)
    at HTTPParser.parserOnIncomingClient (node:_http_client:716:27)
    at HTTPParser.parserOnHeadersComplete (node:_http_common:117:17)
    at TLSSocket.socketOnData (node:_http_client:558:22)
    at TLSSocket.emit (node:events:519:28)
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

I see the following line in yarn.lock:

debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.4.1:
  version "4.4.2"
  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.2.tgz#96b480a7fe47cc04fe57f0bf56e058dba2a001fa"
  integrity sha512-IQeXCZhGRpFiLI3MYlCGLjNssUBiE8G21RMyNH35KFsxIvhrMeh5jXuG82woDZrYX9pgqHs+GF5js2Ducn4y4A==
  dependencies:
    ms "^2.1.3"

The URL https://registry.yarnpkg.com/debug/-/debug-4.4.2.tgz#96b480a7fe47cc04fe57f0bf56e058dba2a001fa returns 404.

I am not sure why the CI build is not complaining about this, but it feels wrong to me to reference a 404 URL in yarn.lock, what do you think?

PS: debug-js/debug#1005

[nemesifier]

I did some changes to the README.

The save on the complete bundle is only ~300KB.
In OpenWISP dashboard we need to load the complete bundle, so reducing 300KB is good but I wonder if we really need 1.3 MB to show geographic and indoor maps.

Is there a way to reduce the imports of echarts so that we only import exactly what we use and let the javascript pruning tools do the work of removing all the JS code that we don't use?

[nemesifier]

I changed this in 02e68ba, please review.

[codesankalp]

I did these changes to align with openwisp-utils command