Skip to content

Commit 3bc6169

Browse files
markw-derivmarkw-deriv
authored
chore: implement webpack analysing for each package (deriv-com#14800)
1 parent d8337d7 commit 3bc6169

File tree

17 files changed

+185
-14
lines changed

17 files changed

+185
-14
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,6 @@ test-results/
3030
playwright-report/
3131
playwright/.cache/
3232
.nx
33+
packages/*/stats.json
34+
packages/*/report.json
35+
packages/*/analyzed.html

‎analyze.html

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Bundle Analyser</title>
7+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
8+
<style>
9+
html,
10+
body {
11+
height: 100%;
12+
margin: 0;
13+
}
14+
#main-content {
15+
display: flex;
16+
flex-direction: column;
17+
height: 100%;
18+
}
19+
#frame {
20+
flex-grow: 1;
21+
}
22+
23+
.navbar {
24+
background-color: rgb(255, 235, 255);
25+
border-bottom: 1px solid purple;
26+
padding: 0 12px;
27+
}
28+
29+
.navbar .nav-link {
30+
color: black;
31+
}
32+
.total-size {
33+
color: white;
34+
background-color: purple;
35+
padding: 5px 10px;
36+
border-radius: 5px;
37+
}
38+
</style>
39+
</head>
40+
<body onload="updateLabelOnStart()">
41+
<div id="main-content">
42+
<nav class="navbar navbar-expand-lg">
43+
<a class="navbar-brand" href="#">Bundle Analyser</a>
44+
45+
<div class="navbar-collapse" id="navbarNavDropdown">
46+
<ul class="navbar-nav">
47+
<li class="nav-item dropdown">
48+
<button
49+
class="nav-link dropdown-toggle"
50+
href="#"
51+
id="navbarDropdownMenuLink"
52+
data-bs-toggle="dropdown"
53+
aria-expanded="false"
54+
onkeypress="event.preventDefault()"
55+
>
56+
Loading...
57+
</button>
58+
59+
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
60+
<button class="dropdown-item" href="#" onclick="updateIframe('account-v2')">
61+
account-v2
62+
</button>
63+
<button class="dropdown-item" href="#" onclick="updateIframe('account')">
64+
account
65+
</button>
66+
<button class="dropdown-item" href="#" onclick="updateIframe('appstore')">
67+
appstore
68+
</button>
69+
<button class="dropdown-item" href="#" onclick="updateIframe('bot-web-ui')">
70+
bot-web-ui
71+
</button>
72+
<button class="dropdown-item" href="#" onclick="updateIframe('cashier-v2')">
73+
cashier-v2
74+
</button>
75+
<button class="dropdown-item" href="#" onclick="updateIframe('cashier')">
76+
cashier
77+
</button>
78+
<button class="dropdown-item" href="#" onclick="updateIframe('cfd')">cfd</button>
79+
<button class="dropdown-item" href="#" onclick="updateIframe('core')">core</button>
80+
<button class="dropdown-item" href="#" onclick="updateIframe('p2p-v2')">p2p-v2</button>
81+
<button class="dropdown-item" href="#" onclick="updateIframe('p2p')">p2p</button>
82+
<button class="dropdown-item" href="#" onclick="updateIframe('reports')">
83+
reports
84+
</button>
85+
<button class="dropdown-item" href="#" onclick="updateIframe('trader')">trader</button>
86+
<button class="dropdown-item" href="#" onclick="updateIframe('tradershub')">
87+
tradershub
88+
</button>
89+
<button class="dropdown-item" href="#" onclick="updateIframe('wallets')">
90+
wallets
91+
</button>
92+
</div>
93+
</li>
94+
</ul>
95+
</div>
96+
97+
<span class="total-size" id="bundleSize">Bundle Size: Loading...</span>
98+
</nav>
99+
<iframe
100+
id="frame"
101+
title="bundle-view"
102+
src="./packages/core/analyzed.html"
103+
style="width: 100%; border: none"
104+
></iframe>
105+
</div>
106+
<script
107+
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
108+
integrity="sha256-CDOy6cOibCWEdsRiZuaHf8dSGGJRYuBGC+mjoJimHGw="
109+
crossorigin="anonymous"
110+
></script>
111+
<script>
112+
async function updateIframe(packageName) {
113+
const iframeSrc = './packages/' + packageName + '/analyzed.html';
114+
document.getElementById('frame').src = iframeSrc;
115+
document.getElementById('navbarDropdownMenuLink').textContent =
116+
packageName.charAt(0).toUpperCase() + packageName.slice(1);
117+
updateBundleSize(packageName);
118+
}
119+
120+
async function updateBundleSize(packageName) {
121+
const response = await fetch(`./packages/${packageName}/report.json`);
122+
if (!response.ok) {
123+
document.getElementById('bundleSize').textContent = 'Bundle Size: Error loading data';
124+
return;
125+
}
126+
const data = await response.json();
127+
const totalStatSize = data.reduce((acc, item) => acc + item.statSize, 0);
128+
const totalParsedSize = data.reduce((acc, item) => acc + item.parsedSize, 0);
129+
const totalGzipSize = data.reduce((acc, item) => acc + item.gzipSize, 0);
130+
document.getElementById('bundleSize').innerHTML =
131+
'<strong>Stat Size:</strong> ' +
132+
formatBytes(totalStatSize) +
133+
', <strong>Parsed Size:</strong> ' +
134+
formatBytes(totalParsedSize) +
135+
', <strong>Gzip Size:</strong> ' +
136+
formatBytes(totalGzipSize);
137+
}
138+
139+
function formatBytes(bytes, decimals = 2) {
140+
if (bytes === 0) return '0 Bytes';
141+
const k = 1024;
142+
const dm = decimals < 0 ? 0 : decimals;
143+
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
144+
const i = Math.floor(Math.log(bytes) / Math.log(k));
145+
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
146+
}
147+
148+
function updateLabelOnStart() {
149+
updateIframe('core');
150+
}
151+
</script>
152+
</body>
153+
</html>

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
"ts-jest": "^26.4.2"
5757
},
5858
"scripts": {
59+
"analyze": "nx run-many --target=analyze",
5960
"build:all": "nx build @deriv/components --skip-nx-cache && nx build @deriv/account --skip-nx-cache && nx build @deriv/bot-web-ui --skip-nx-cache && nx run-many --target=build",
6061
"build:one": "f () { nx build @deriv/$1 $2 ;}; f",
6162
"build:since": "nx affected --target=build",

‎packages/account-v2/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"node": "18.x"
77
},
88
"scripts": {
9-
"build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.ts\"",
9+
"analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
10+
"build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.ts\" --profile --json > stats.json",
1011
"serve": "rimraf dist && concurrently \"cross-env BUILD_MODE='serve' NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config ./webpack.config.ts\" \"tsc -w --noEmit --preserveWatchOutput\"",
1112
"start": "rimraf dist && npm run test && npm run serve"
1213
},

‎packages/account/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,10 @@
1414
"node": "18.x"
1515
},
1616
"scripts": {
17+
"analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
1718
"start": "npm run test && npm run serve",
1819
"serve": "echo \"Serving...\" && NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config \"./build/webpack.config.js\"",
19-
"build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1;}; f",
20+
"build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1 --profile --json > stats.json;}; f",
2021
"build:travis": "rimraf dist && webpack --config \"./build/webpack.config.js\" --mode=production",
2122
"test": "echo \"No test specified\"",
2223
"test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",

‎packages/appstore/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
"node": "18.x"
99
},
1010
"scripts": {
11-
"build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress",
11+
"analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
12+
"build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --profile --json > stats.json ",
1213
"build:travis": "rimraf dist && webpack",
1314
"serve": "rimraf dist && concurrently \"cross-env BUILD_MODE='serve' NODE_OPTIONS='-r ts-node/register' webpack --progress --watch\" \"tsc -w --noEmit --preserveWatchOutput\"",
1415
"start": "rimraf dist && npm run test && npm run serve",

‎packages/bot-web-ui/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,10 @@
1818
"node": "18.x"
1919
},
2020
"scripts": {
21+
"analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
2122
"start": "npm run test && npm run serve",
2223
"serve": "echo \"Serving...\" && NODE_OPTIONS='-r ts-node/register' webpack --progress --watch",
23-
"build": "f () { npm run build:skeleton && NODE_OPTIONS='-r ts-node/register' webpack --progress --env base=$1 ;}; f",
24+
"build": "f () { npm run build:skeleton && NODE_OPTIONS='-r ts-node/register' webpack --progress --env base=$1 --profile --json > stats.json ;}; f",
2425
"build:skeleton": "lerna exec --scope @deriv/bot-skeleton -- npm run build",
2526
"build:travis": "echo \"No build:travis specified\"",
2627
"test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx|spec.ts|spec.js|spec.tsx|spec.tsx)\"",

‎packages/cashier-v2/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"node": "18.x"
88
},
99
"scripts": {
10-
"build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.ts\"",
10+
"analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
11+
"build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.ts\" --profile --json > stats.json",
1112
"serve": "rimraf dist && concurrently \"cross-env BUILD_MODE='serve' NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config ./webpack.config.ts\" \"tsc -w --noEmit --preserveWatchOutput\"",
1213
"start": "rimraf dist && npm run test && npm run serve"
1314
},

‎packages/cashier/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,12 @@
2525
"url": "git+https://github.com/binary-com/deriv-app.git"
2626
},
2727
"scripts": {
28+
"analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
2829
"test": "echo \"No test specified\"",
2930
"test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",
3031
"serve": "echo \"Serving...\" && NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config \"./build/webpack.config.js\"",
3132
"build:travis": "rimraf dist && webpack --config \"./build/webpack.config.js\" --mode=production",
32-
"build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1;}; f"
33+
"build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1 --profile --json > stats.json;}; f"
3334
},
3435
"bugs": {
3536
"url": "https://github.com/binary-com/deriv-app/issues"

‎packages/cfd/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@
55
"main": "dist/cfd/js/cfd.js",
66
"private": true,
77
"scripts": {
8+
"analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
89
"start": "npm run test && npm run serve",
910
"serve": "echo \"Serving...\" && NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config \"./build/webpack.config.js\"",
10-
"build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1;}; f",
11+
"build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1 --profile --json > stats.json;}; f",
1112
"build:travis": "echo \"No build:travis specified\"",
1213
"test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",
1314
"deploy": "echo \"No deploy specified\"",

‎packages/core/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@
55
"main": "index.js",
66
"private": true,
77
"scripts": {
8+
"analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
89
"start": "npm run test && npm run serve",
910
"serve": "f() { echo \"Serving...\" && ./node_modules/.bin/webpack serve --config \"./build/webpack.config.js\" --env open $1;}; f",
10-
"build": "f () { webpack --config \"./build/webpack.config.js\" --env base=$1 --env IS_CRYPTO_APP=${IS_CRYPTO_APP:-false};}; f",
11+
"build": "f () { webpack --config \"./build/webpack.config.js\" --env base=$1 --env IS_CRYPTO_APP=${IS_CRYPTO_APP:-false} --profile --json > stats.json;}; f",
1112
"build:travis": "echo \"No build:travis specified\"",
1213
"test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",
1314
"deploy": "npm run build && gh-pages -d dist --remove=\"js\"",

‎packages/p2p-v2/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"node": "18.x"
88
},
99
"scripts": {
10-
"build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\"",
10+
"analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
11+
"build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\" --profile --json > stats.json",
1112
"serve": "rimraf dist && concurrently \"cross-env BUILD_MODE='serve' NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config ./webpack.config.js\" \"tsc -w --noEmit --preserveWatchOutput\"",
1213
"start": "rimraf dist && npm run test && npm run serve"
1314
},

‎packages/p2p/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@
1414
"node": "18.x"
1515
},
1616
"scripts": {
17+
"analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
1718
"test:eslint": "eslint \"./src/**/*.?(js|ts|jsx|tsx)\"",
18-
"build": "rimraf lib && NODE_OPTIONS='-r ts-node/register' webpack --progress",
19+
"build": "rimraf lib && NODE_OPTIONS='-r ts-node/register' webpack --progress --profile --json > stats.json",
1920
"build:publish": "deriv-publisher prepublish && lerna exec --scope=@deriv/shared --scope=@deriv/components -- npm run build:travis -- && rimraf lib && cross-env NODE_ENV=production NPM_PUBLISHING_MODE=1 webpack --progress; deriv-publisher postpublish",
2021
"build:travis": "rimraf lib && webpack",
2122
"serve": "rimraf lib && cross-env BUILD_MODE='serve' NODE_OPTIONS='-r ts-node/register' webpack --progress --watch",

‎packages/reports/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@
55
"main": "dist/reports/js/reports.js",
66
"private": true,
77
"scripts": {
8+
"analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
89
"start": "npm run test && npm run serve",
910
"serve": "echo \"Serving...\" && NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config \"./build/webpack.config.js\"",
10-
"build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1;}; f",
11+
"build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1 --profile --json > stats.json;}; f",
1112
"build:travis": "echo \"No build:travis specified\"",
1213
"test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",
1314
"deploy": "echo \"No deploy specified\"",

‎packages/trader/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@
55
"main": "dist/trader/js/trader.js",
66
"private": true,
77
"scripts": {
8+
"analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
89
"start": "npm run test && npm run serve",
910
"serve": "echo \"Serving...\" && NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config \"./build/webpack.config.js\"",
10-
"build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1;}; f",
11+
"build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1 --profile --json > stats.json;}; f",
1112
"build:travis": "echo \"No build:travis specified\"",
1213
"test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",
1314
"deploy": "echo \"No deploy specified\"",

‎packages/tradershub/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"node": "18.x"
88
},
99
"scripts": {
10-
"build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\"",
10+
"analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
11+
"build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\" --profile --json > stats.json",
1112
"serve": "rimraf dist && concurrently \"cross-env BUILD_MODE='serve' NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config ./webpack.config.js\" \"tsc -w --noEmit --preserveWatchOutput\"",
1213
"start": "rimraf dist && npm run test && npm run serve",
1314
"translate": "sh ./scripts/update-translations.sh"

‎packages/wallets/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"node": "18.x"
88
},
99
"scripts": {
10-
"build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\" && npm run translate",
10+
"analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
11+
"build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\" --profile --json > stats.json && npm run translate",
1112
"serve": "rimraf dist && concurrently \"cross-env BUILD_MODE='serve' NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config ./webpack.config.js\" \"tsc -w --noEmit --preserveWatchOutput\"",
1213
"start": "rimraf dist && npm run test && npm run serve",
1314
"translate": "sh ./scripts/update-translations.sh"

0 commit comments

Comments
 (0)