[change] Reduce library size #392

.prettierrc

@@ -1,5 +1,6 @@
 {
   "trailingComma": "all",
   "bracketSpacing": false,
-  "tabWidth": 2
-}
+  "tabWidth": 2,
+  "printWidth": 88
+}

README.md

@@ -21,6 +21,28 @@ yarn install
 yarn start
 ```
 
+## Building the library
+
+To build the production-ready library:
+
+```bash
+yarn build
+```
+
+**Output**: Single optimized bundle with all dependencies included.
+
+- `netjsongraph.[hash].min.js` - Complete library with ECharts and Leaflet
+- `netjsongraph.[hash].min.js.map` - Source map for debugging
+- Compressed versions (`.gz` and `.br`) for optimized delivery
+
+The build includes:
+
+- **ECharts** for network graph rendering
+- **Leaflet** for geographic map rendering
+- **Core NetJSONGraph.js** functionality
+
+This unified bundle approach ensures compatibility and simplifies deployment while maintaining optimal performance through advanced webpack optimizations.
+
 ### Run Tests
 
 The test suite includes browser tests, so **ensure that ChromeDriver is installed** before running them.
@@ -371,9 +393,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 +842,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>

package.json

@@ -3,6 +3,7 @@
   "version": "0.2.0",
   "description": "NetJSON NetworkGraph visualizer",
   "main": "index.js",
+  "sideEffects": false,
   "scripts": {
     "test": "jest --silent",
     "dev": "webpack serve --open --mode development",
@@ -52,6 +53,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 +75,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"