Skip to content

Commit 373d97b

Browse files
codesankalpcodesankalp
committed
[change] Reduce library size #392 
1 parent e506d85 commit 373d97b

24 files changed

+2095
-43280
lines changed

‎.prettierrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"trailingComma": "all",
33
"bracketSpacing": false,
4-
"tabWidth": 2
4+
"tabWidth": 2,
5+
"printWidth": 88
56
}

‎README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,28 @@ yarn install
135135
yarn start
136136
```
137137

138+
## Building the library
139+
140+
To build the production-ready library:
141+
142+
```bash
143+
yarn build
144+
```
145+
146+
**Output**: Single optimized bundle with all dependencies included.
147+
148+
- `netjsongraph.[hash].min.js` - Complete library with ECharts and Leaflet
149+
- `netjsongraph.[hash].min.js.map` - Source map for debugging
150+
- Compressed versions (`.gz` and `.br`) for optimized delivery
151+
152+
The build includes:
153+
154+
- **ECharts** for network graph rendering
155+
- **Leaflet** for geographic map rendering
156+
- **Core NetJSONGraph.js** functionality
157+
158+
This unified bundle approach ensures compatibility and simplifies deployment while maintaining optimal performance through advanced webpack optimizations.
159+
138160
### Run Tests
139161

140162
The test suite includes browser tests, so **ensure that ChromeDriver is installed** before running them.

‎index.html‎

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,13 @@
3333
margin: 0;
3434
padding: 0;
3535
box-sizing: border-box;
36-
transition: background-color var(--transition-speed) ease,
37-
color var(--transition-speed) ease;
36+
transition:
37+
background-color var(--transition-speed) ease,
38+
color var(--transition-speed) ease;
3839
}
3940

4041
body {
41-
font-family: 'Inter', sans-serif;
42+
font-family: "Inter", sans-serif;
4243
background-color: var(--bg-primary);
4344
color: var(--text-primary);
4445
line-height: 1.6;
@@ -124,12 +125,14 @@
124125
flex-direction: column;
125126
align-items: center;
126127
}
128+
127129
.cards a {
128130
width: 100%;
129131
}
130132
}
131133
</style>
132134
</head>
135+
133136
<body>
134137
<button class="theme-toggle" aria-label="Toggle Dark Mode">
135138
🌓 Toggle Theme
@@ -186,11 +189,7 @@ <h1>NetJSONGraph.js Example Demos</h1>
186189
>Leaflet plugins</a
187190
>
188191
</div>
189-
<div class="cards">
190-
<a href="./examples/netjsongraph-graphGL.html" target="_blank"
191-
>GraphGL render for big data</a
192-
>
193-
</div>
192+
194193
<div class="cards">
195194
<a href="./examples/netjsongraph-elementsLegend.html" target="_blank"
196195
>Custom attributes</a
@@ -216,11 +215,7 @@ <h1>NetJSONGraph.js Example Demos</h1>
216215
>Multiple tiles render</a
217216
>
218217
</div>
219-
<div class="cards">
220-
<a href="./examples/netjsonmap-animation.html" target="_blank"
221-
>Geographic map animated links</a
222-
>
223-
</div>
218+
224219
<div class="cards">
225220
<a href="./examples/netjsonmap-appendData2.html" target="_blank"
226221
>Append data using arrays</a
@@ -244,23 +239,27 @@ <h1>NetJSONGraph.js Example Demos</h1>
244239
</main>
245240

246241
<script>
247-
const themeToggle = document.querySelector('.theme-toggle');
242+
const themeToggle = document.querySelector(".theme-toggle");
248243
const htmlElement = document.documentElement;
249244

250245
// Check for saved theme preference or system preference
251-
const savedTheme = localStorage.getItem('theme');
252-
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
246+
const savedTheme = localStorage.getItem("theme");
247+
const systemPrefersDark = window.matchMedia(
248+
"(prefers-color-scheme: dark)",
249+
).matches;
253250

254-
if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
255-
htmlElement.classList.add('dark-mode');
251+
if (savedTheme === "dark" || (!savedTheme && systemPrefersDark)) {
252+
htmlElement.classList.add("dark-mode");
256253
}
257254

258-
themeToggle.addEventListener('click', () => {
259-
htmlElement.classList.toggle('dark-mode');
260-
255+
themeToggle.addEventListener("click", () => {
256+
htmlElement.classList.toggle("dark-mode");
257+
261258
// Save theme preference
262-
const currentTheme = htmlElement.classList.contains('dark-mode') ? 'dark' : 'light';
263-
localStorage.setItem('theme', currentTheme);
259+
const currentTheme = htmlElement.classList.contains("dark-mode")
260+
? "dark"
261+
: "light";
262+
localStorage.setItem("theme", currentTheme);
264263
});
265264
</script>
266265
</body>

‎lib/js/echarts-gl.min.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.3.0-alpha",
44
"description": "NetJSON NetworkGraph visualizer",
55
"main": "index.js",
6+
"sideEffects": false,
67
"scripts": {
78
"test": "jest --silent",
89
"dev": "webpack serve --open --mode development",
@@ -52,6 +53,7 @@
5253
"@testing-library/jest-dom": "^6.4.2",
5354
"@types/jest": "^30.0.0",
5455
"acorn": "^8.11.3",
56+
"compression-webpack-plugin": "^11.1.0",
5557
"copy-webpack-plugin": "^13.0.0",
5658
"coveralls": "^3.1.1",
5759
"css-loader": "^7.1.2",
@@ -73,12 +75,12 @@
7375
"style-loader": "^4.0.0",
7476
"terser-webpack-plugin": "^5.3.10",
7577
"webpack": "^5.90.3",
78+
"webpack-bundle-analyzer": "^4.10.2",
7679
"webpack-cli": "^6.0.1",
7780
"webpack-dev-server": "^5.0.2"
7881
},
7982
"dependencies": {
8083
"echarts": "^5.6.0",
81-
"echarts-gl": "^2.0.9",
8284
"kdbush": "^4.0.2",
8385
"leaflet": "^1.8.0",
8486
"zrender": "^6.0.0"

0 commit comments

Comments
 (0)