Skip to content

[change] Reduce library size #392 #425

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
codesankalp wants to merge 14 commits into
base: master
Choose a base branch
from
Open

[change] Reduce library size #392 #425

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e95719c
[change] Reduce library size #392
codesankalp Nov 2, 2025
ce3acc2
[change] Reduce library size #392
codesankalp Nov 21, 2025
6b49ea5
[chore] Use leaflet dynamically for echartjs builds
codesankalp Nov 21, 2025
e2d8adb
[chore] Fix codeql warnings
codesankalp Jan 20, 2026
ae8b53e
[chore] Remove dead code
codesankalp Jan 20, 2026
e9cae0e
[chores] Minor improvements
nemesifier Jan 23, 2026
a58fd0e
[fix] Fixed loader
nemesifier Jan 23, 2026
f739b2c
[chores] Optimized png
nemesifier Jan 23, 2026
3af680f
[fix] Webpack plugin assumes HTML structure
nemesifier Jan 23, 2026
8e9a238
[fix] Improve CI coverage and fix webpack configurations
codesankalp Feb 2, 2026
50e0d13
[fix] Improve build configuration and dynamic asset loading
codesankalp Feb 3, 2026
2df005f
[chores] Updated yarn.lock (appears after running yarn)
nemesifier Feb 5, 2026
7af27bb
[fix] Expose bundled Leaflet to window.L for external plugins
codesankalp Feb 6, 2026
7446060
[chores] Suggestions from @coderabbitai
nemesifier Feb 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,7 @@ module.exports = {
browser: true,
es6: true,
},
globals: {
BUNDLE_LEAFLET: "readonly",
},
};
23 changes: 21 additions & 2 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Check warning

Code scanning / CodeQL

Workflow does not contain permissions Medium

Actions job or workflow does not limit the permissions of the GITHUB_TOKEN. Consider setting an explicit permissions block, using the following as a minimal starting point: {contents: read}
name: Build and Deploy
runs-on: ubuntu-latest
if: ${{ github.event_name=='push' }}
Expand Down
41 changes: 41 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,47 @@ 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
```

**Output**:

- `netjsongraph.min.js` - Complete library with ECharts and Leaflet
- Compressed versions (`.gz` and `.br`) for optimized delivery

**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
```

**Output**:

- `netjsongraph.echarts.min.js` - Library with ECharts only
- Compressed versions (`.gz` and `.br`)

**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.
Expand Down
13 changes: 3 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion knip.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"]
Copy link
Member Author

@codesankalp codesankalp Feb 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is optional now.

}
Binary file modified lib/css/assets/leaflet-measure.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 24 additions & 8 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,25 @@
"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/"
],
"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:echarts-only": "webpack --progress --mode production --env BUILD_TYPE=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": [
Expand Down Expand Up @@ -55,6 +63,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",
Expand All @@ -77,15 +86,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"
}
Loading
Loading