[change] Reduce library size #392

Closes #392

Signed-off-by: Sankalp <[email protected]>

Author: codesankalp

README.md

@@ -21,6 +21,48 @@ yarn install
 yarn start
 ```
 
+## Build Variants
+
+NetJSONGraph.js offers **3 optimized build variants** to match different integration needs:
+
+### **Chunked Build**
+
+```bash
+yarn build:chunks
+```
+
+**Output**: Separate files for optimal loading
+
+- `netjsongraph.[hash].min.js` - Core library
+- `echarts.[hash].min.js` - Graph rendering
+- `leaflet.[hash].min.js` - Map rendering
+
+**Best for**: Large applications with conditional loading
+
+### **ECharts Bundle**
+
+```bash
+yarn build:echarts
+```
+
+**Output**: Single file optimized for graphs
+
+- `netjsongraph-with-echarts.[hash].min.js`
+
+**Best for**: Pages showing only network topology graphs
+
+### **Complete Bundle**
+
+```bash
+yarn build:complete
+```
+
+**Output**: Single file with all features
+
+- `netjsongraph-complete.[hash].min.js`
+
+**Best for**: Pages with both graphs and maps
+
 ### Run Tests
 
 The test suite includes browser tests, so **ensure that ChromeDriver is installed** before running them.
@@ -371,9 +413,9 @@ The library mainly supports two rendering modes -- `graph` and `map`. You can ch
 
 In extreme cases, you can also pass your own render function if you don't want Echarts to render. We will pass in the processed netjson data and netjsongraph object.
 
-For graph, you need to configure `graphConfig` property. We only support [graph](https://echarts.apache.org/en/option.html#series-graph) and [graphGL](https://echarts.apache.org/zh/option-gl.html#series-graphGL). The main difference between **graph** and **graphGL** is the [`forceAtlas2`](https://echarts.apache.org/zh/option-gl.html#series-graphGL.forceAtlas2) param series in Echarts. The latter is mainly used for big data rendering. You can use **graphGL** by setting `graphConfig.type` to `graphGL`. We use **graph** series and **force** layout by default. You can modify them freely according to the documentation.
+For graph, you need to configure `graphConfig` property. We support [graph](https://echarts.apache.org/en/option.html#series-graph) rendering with force layout. We use **graph** series and **force** layout by default. You can modify them freely according to the documentation.
 
-For map, you need to configure `mapOptions`. The [`mapOptions`](https://leafletjs.com/reference-1.5.0.html#map-option) and [`mapTileConfig`](https://leafletjs.com/reference-1.5.0.html#tilelayer) are required for the map render. You can customize the nodes and links with [`nodeConfig`](https://echarts.apache.org/en/option.html#series-scatter) and [`linkConfig`](https://echarts.apache.org/en/option.html#series-lines) optionally. For map nodes, you can also change the `type` to [`effectScatter`](https://echarts.apache.org/en/option.html#series-effectScatter) series to enable animation effects.
+For map, you need to configure `mapOptions`. The [`mapOptions`](https://leafletjs.com/reference-1.5.0.html#map-option) and [`mapTileConfig`](https://leafletjs.com/reference-1.5.0.html#tilelayer) are required for the map render. You can customize the nodes and links with [`nodeConfig`](https://echarts.apache.org/en/option.html#series-scatter) and [`linkConfig`](https://echarts.apache.org/en/option.html#series-lines) optionally.
 
 You can also customize some global properties with [`echartsOption`](https://echarts.apache.org/en/option.html) in echarts.
 
@@ -820,9 +862,6 @@ The demo shows default `graph` render.
 The demo shows `map` render.
 [Map demo](https://openwisp.github.io/netjsongraph.js/examples/netjsonmap.html)
 
-The demo shows how to use `graphGL` to render big data.
-[graphGL(bigData) demo](https://openwisp.github.io/netjsongraph.js/examples/netjsongraph-graphGL.html)
-
 The demo shows how to set custom attributes.
 [Custom attributes demo](https://openwisp.github.io/netjsongraph.js/examples/netjsongraph-elementsLegend.html)
 

index.html

@@ -33,12 +33,13 @@
         margin: 0;
         padding: 0;
         box-sizing: border-box;
-        transition: background-color var(--transition-speed) ease,
-                    color var(--transition-speed) ease;
+        transition:
+          background-color var(--transition-speed) ease,
+          color var(--transition-speed) ease;
       }
 
       body {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         background-color: var(--bg-primary);
         color: var(--text-primary);
         line-height: 1.6;
@@ -124,12 +125,14 @@
           flex-direction: column;
           align-items: center;
         }
+
         .cards a {
           width: 100%;
         }
       }
     </style>
   </head>
+
   <body>
     <button class="theme-toggle" aria-label="Toggle Dark Mode">
       🌓 Toggle Theme
@@ -186,11 +189,7 @@ <h1>NetJSONGraph.js Example Demos</h1>
           >Leaflet plugins</a
         >
       </div>
-      <div class="cards">
-        <a href="./examples/netjsongraph-graphGL.html" target="_blank"
-          >GraphGL render for big data</a
-        >
-      </div>
+
       <div class="cards">
         <a href="./examples/netjsongraph-elementsLegend.html" target="_blank"
           >Custom attributes</a
@@ -216,11 +215,7 @@ <h1>NetJSONGraph.js Example Demos</h1>
           >Multiple tiles render</a
         >
       </div>
-      <div class="cards">
-        <a href="./examples/netjsonmap-animation.html" target="_blank"
-          >Geographic map animated links</a
-        >
-      </div>
+
       <div class="cards">
         <a href="./examples/netjsonmap-appendData2.html" target="_blank"
           >Append data using arrays</a
@@ -244,23 +239,27 @@ <h1>NetJSONGraph.js Example Demos</h1>
     </main>
 
     <script>
-      const themeToggle = document.querySelector('.theme-toggle');
+      const themeToggle = document.querySelector(".theme-toggle");
       const htmlElement = document.documentElement;
 
       // Check for saved theme preference or system preference
-      const savedTheme = localStorage.getItem('theme');
-      const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const savedTheme = localStorage.getItem("theme");
+      const systemPrefersDark = window.matchMedia(
+        "(prefers-color-scheme: dark)",
+      ).matches;
 
-      if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
-        htmlElement.classList.add('dark-mode');
+      if (savedTheme === "dark" || (!savedTheme && systemPrefersDark)) {
+        htmlElement.classList.add("dark-mode");
       }
 
-      themeToggle.addEventListener('click', () => {
-        htmlElement.classList.toggle('dark-mode');
-        
+      themeToggle.addEventListener("click", () => {
+        htmlElement.classList.toggle("dark-mode");
+
         // Save theme preference
-        const currentTheme = htmlElement.classList.contains('dark-mode') ? 'dark' : 'light';
-        localStorage.setItem('theme', currentTheme);
+        const currentTheme = htmlElement.classList.contains("dark-mode")
+          ? "dark"
+          : "light";
+        localStorage.setItem("theme", currentTheme);
       });
     </script>
   </body>

lib/js/echarts-gl.min.js

@@ -3,11 +3,16 @@
   "version": "0.2.0",
   "description": "NetJSON NetworkGraph visualizer",
   "main": "index.js",
+  "sideEffects": false,
   "scripts": {
     "test": "jest --silent",
     "dev": "webpack serve --open --mode development",
     "start": "yarn dev",
     "build": "webpack --progress --mode production",
+    "build:chunks": "webpack --progress --mode production --env BUILD_TYPE=chunks",
+    "build:echarts": "webpack --progress --mode production --env BUILD_TYPE=echarts-bundle",
+    "build:complete": "webpack --progress --mode production --env BUILD_TYPE=complete-bundle",
+    "build:all": "yarn build:chunks && yarn build:echarts && yarn build:complete",
     "coverage": "jest --silent --coverage",
     "coveralls": "jest --silent -f ./coverage/lcov.info && cat ./coverage/lcov.info | coveralls || echo 'no coverage file found'",
     "precommit": "lint-staged",
@@ -52,6 +57,7 @@
     "@testing-library/jest-dom": "^6.4.2",
     "@types/jest": "^30.0.0",
     "acorn": "^8.11.3",
+    "compression-webpack-plugin": "^11.1.0",
     "copy-webpack-plugin": "^13.0.0",
     "coveralls": "^3.1.1",
     "css-loader": "^7.1.2",
@@ -73,12 +79,12 @@
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.10",
     "webpack": "^5.90.3",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.0.2"
   },
   "dependencies": {
     "echarts": "^5.6.0",
-    "echarts-gl": "^2.0.9",
     "kdbush": "^4.0.2",
     "leaflet": "^1.8.0",
     "zrender": "^6.0.0"