[change] Reduce library size #392

.eslintrc.js

@@ -11,4 +11,7 @@ module.exports = {
     browser: true,
     es6: true,
   },
+  globals: {
+    BUNDLE_LEAFLET: "readonly",
+  },
 };

.github/workflows/ci.yml

@@ -49,65 +49,84 @@
         run: ./run-qa-checks
 
   build:
-    name: Tests and Coverage
+    name: Tests and Coverage (${{ matrix.build-type }})
     runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        build-type: [dev, prod, echarts-only]
 
     steps:
       - uses: actions/checkout@v6
 
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
           node-version-file: ".nvmrc"
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
       - name: Cache yarn
         uses: actions/cache@v5
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: ${{ runner.os }}-yarn-
 
       - name: Installing dependencies
         run: |
           yarn install
 
-      - name: Running Server
+      - name: Build (Prod Full)
+        if: matrix.build-type == 'prod'
+        run: yarn build:full
+
+      - name: Build (Echarts Only)
+        if: matrix.build-type == 'echarts-only'
+        run: yarn build:echarts-only
+
+      - name: Running Server (Dev)
+        if: matrix.build-type == 'dev'
         run: yarn start &
 
+      - name: Running Server (Dist)
+        if: matrix.build-type == 'prod' || matrix.build-type == 'echarts-only'
+        run: npx --yes http-server dist -p 8080 &
+
       - name: Wait for server to be ready
         run: npx wait-on http://localhost:8080
 
       - name: Set up Chrome
         uses: browser-actions/setup-chrome@v2
 
       - name: Set up ChromeDriver
         uses: nanasess/setup-chromedriver@v2
 
       - name: Check chrome and chromedriver version
         run: |
           chrome --version
           which chrome
           chromedriver --version
           which chromedriver
 
       - name: Unit tests
+        if: matrix.build-type == 'dev'
         run: yarn coverage --testPathIgnorePatterns=test/netjsongraph.browser.test.js
 
       - name: Browser tests
         # Test timeout set to 30 seconds in CI since it runs slower
         run: yarn test --runInBand --testTimeout=30000 test/netjsongraph.browser.test.js
 
       - name: Coveralls
+        if: matrix.build-type == 'dev'
         uses: coverallsapp/github-action@master
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
 
   build-and-deploy:
     name: Build and Deploy
     runs-on: ubuntu-latest
     if: ${{ github.event_name=='push' }}

README.md

@@ -147,6 +147,61 @@ yarn install
 yarn start
 ```
 
+## Building the library
+
+The netjsongraph.js library provides **two build variants** to optimize bundle size for different use cases.
+
+By default, `yarn build` executes the full bundle.
+
+### 1. Full Bundle (Recommended for standalone usage)
+
+Build the complete library with all dependencies included:
+
+```bash
+yarn build:full
+```
+
+Analyze the build with [Webpack Bundle Analyzer](https://github.com/webpack/webpack-bundle-analyzer):
+
+```bash
+yarn build:full:stats
+```
+
+**Output**:
+
+- `dist/netjsongraph.min.js` - Complete library with ECharts and Leaflet
+- Compressed versions (`.gz` and `.br`) for optimized delivery
+- Deletes/overwrites previous builds
+
+**Use when**: You want a standalone library with all dependencies bundled.
+
+### 2. ECharts-Only Bundle (Optimized for projects with existing Leaflet)
+
+Build the library without Leaflet, expecting it to be provided externally:
+
+```bash
+yarn build:echarts-only
+```
+
+Analyze the build with [Webpack Bundle Analyzer](https://github.com/webpack/webpack-bundle-analyzer):
+
+```bash
+yarn build:echarts-only:stats
+```
+
+**Output**:
+
+- `dist/netjsongraph.echarts.min.js` - Library with ECharts only
+- Compressed versions (`.gz` and `.br`)
+- Deletes/overwrites previous builds
+
+**Use when**: Your project already includes Leaflet (e.g., via django-leaflet in OpenWISP projects). This reduces bundle size by ~144 KiB.
+
+**Requirements**: Leaflet must be loaded before NetJSONGraph (available as global `L` object).
+
+**Note**: The echarts-only build dynamically loads Leaflet from CDN for map examples.
+For production use, ensure Leaflet is available locally or from a trusted CDN.
+
 ### Run Tests
 
 The test suite includes browser tests, so **ensure that ChromeDriver is installed** before running them.

index.html

@@ -125,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
@@ -239,16 +241,7 @@ <h1>NetJSONGraph.js Example Demos</h1>
           >Multiple links render</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/netjsonmap-animation.html" target="_blank"
-          >Geographic map animated links</a
-        >
-      </div>
+
       <div class="cards">
         <a href="./examples/netjsongraph-nodeExpand.html" target="_blank"
           >Nodes expand or fold</a

knip.json

@@ -2,5 +2,6 @@
   "$schema": "https://unpkg.com/knip@5/schema.json",
   "project": ["src/**/*.js", "test/**/*.js"],
   "ignore": ["examples/**", "lib/js/**", "public/**", "scripts/**"],
-  "ignoreBinaries": ["wait-on"]
+  "ignoreBinaries": ["wait-on"],
+  "ignoreDependencies": ["leaflet"]
 }

package.json

@@ -2,17 +2,28 @@
   "name": "netjsongraph.js",
   "version": "0.3.0",
   "description": "NetJSON NetworkGraph visualizer",
-  "main": "src/js/netjsongraph.js",
+  "main": "dist/netjsongraph.min.js",
+  "module": "src/js/netjsongraph.js",
+  "sideEffects": true,
+  "files": [
+    "dist/",
+    "src/"
+  ],
   "scripts": {
     "test": "jest --silent",
     "dev": "webpack serve --open --mode development",
     "start": "yarn dev",
-    "build": "webpack --progress --mode production",
+    "build": "yarn build:full",
+    "build:full": "webpack --progress --mode production --env BUILD_TYPE=full",
+    "build:full:stats": "STATS=true yarn build:full",
+    "build:echarts-only": "webpack --progress --mode production --env BUILD_TYPE=echarts-only",
+    "build:echarts-only:stats": "STATS=true yarn build:echarts-only",
     "coverage": "jest --silent --coverage",
     "coveralls": "jest --silent -f ./coverage/lcov.info && cat ./coverage/lcov.info | coveralls || echo 'no coverage file found'",
     "precommit": "lint-staged",
     "lint": "eslint '**/*.js'",
-    "lint:fix": "eslint '**/*.js' --fix"
+    "lint:fix": "eslint '**/*.js' --fix",
+    "prepare": "yarn build:full"
   },
   "lint-staged": {
     "src/**/*.js": [
@@ -55,6 +66,7 @@
     "@babel/preset-env": "^7.23.9",
     "@testing-library/jest-dom": "^6.4.2",
     "@types/jest": "^30.0.0",
+    "compression-webpack-plugin": "^11.1.0",
     "copy-webpack-plugin": "^13.0.0",
     "coveralls": "^3.1.1",
     "css-loader": "^7.1.2",
@@ -77,15 +89,22 @@
     "terser-webpack-plugin": "^5.3.10",
     "typescript": "^5.9.3",
     "webpack": "^5.90.3",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.0.2"
+    "webpack-dev-server": "^5.0.2",
+    "leaflet": "^1.8.0"
   },
   "dependencies": {
     "echarts": "^5.6.0",
-    "echarts-gl": "^2.0.9",
-    "kdbush": "^4.0.2",
-    "leaflet": "^1.8.0",
-    "zrender": "^6.0.0"
+    "kdbush": "^4.0.2"
+  },
+  "peerDependencies": {
+    "leaflet": "^1.8.0"
+  },
+  "peerDependenciesMeta": {
+    "leaflet": {
+      "optional": true
+    }
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }