chore: implement webpack analysing for each package (deriv-com#14800)

heorhi-deriv · Apr 26, 2024 · 3bc6169 · 3bc6169
1 parent d8337d7
commit 3bc6169
Show file tree

Hide file tree

Showing 17 changed files with 185 additions and 14 deletions.
diff --git a/.gitignore b/.gitignore
@@ -30,3 +30,6 @@ test-results/
 playwright-report/
 playwright/.cache/
 .nx
+packages/*/stats.json
+packages/*/report.json
+packages/*/analyzed.html
diff --git a/analyze.html b/analyze.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Bundle Analyser</title>
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <style>
+            html,
+            body {
+                height: 100%;
+                margin: 0;
+            }
+            #main-content {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+            }
+            #frame {
+                flex-grow: 1;
+            }
+
+            .navbar {
+                background-color: rgb(255, 235, 255);
+                border-bottom: 1px solid purple;
+                padding: 0 12px;
+            }
+
+            .navbar .nav-link {
+                color: black;
+            }
+            .total-size {
+                color: white;
+                background-color: purple;
+                padding: 5px 10px;
+                border-radius: 5px;
+            }
+        </style>
+    </head>
+    <body onload="updateLabelOnStart()">
+        <div id="main-content">
+            <nav class="navbar navbar-expand-lg">
+                <a class="navbar-brand" href="#">Bundle Analyser</a>
+
+                <div class="navbar-collapse" id="navbarNavDropdown">
+                    <ul class="navbar-nav">
+                        <li class="nav-item dropdown">
+                            <button
+                                class="nav-link dropdown-toggle"
+                                href="#"
+                                id="navbarDropdownMenuLink"
+                                data-bs-toggle="dropdown"
+                                aria-expanded="false"
+                                onkeypress="event.preventDefault()"
+                            >
+                                Loading...
+                            </button>
+
+                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+                                <button class="dropdown-item" href="#" onclick="updateIframe('account-v2')">
+                                    account-v2
+                                </button>
+                                <button class="dropdown-item" href="#" onclick="updateIframe('account')">
+                                    account
+                                </button>
+                                <button class="dropdown-item" href="#" onclick="updateIframe('appstore')">
+                                    appstore
+                                </button>
+                                <button class="dropdown-item" href="#" onclick="updateIframe('bot-web-ui')">
+                                    bot-web-ui
+                                </button>
+                                <button class="dropdown-item" href="#" onclick="updateIframe('cashier-v2')">
+                                    cashier-v2
+                                </button>
+                                <button class="dropdown-item" href="#" onclick="updateIframe('cashier')">
+                                    cashier
+                                </button>
+                                <button class="dropdown-item" href="#" onclick="updateIframe('cfd')">cfd</button>
+                                <button class="dropdown-item" href="#" onclick="updateIframe('core')">core</button>
+                                <button class="dropdown-item" href="#" onclick="updateIframe('p2p-v2')">p2p-v2</button>
+                                <button class="dropdown-item" href="#" onclick="updateIframe('p2p')">p2p</button>
+                                <button class="dropdown-item" href="#" onclick="updateIframe('reports')">
+                                    reports
+                                </button>
+                                <button class="dropdown-item" href="#" onclick="updateIframe('trader')">trader</button>
+                                <button class="dropdown-item" href="#" onclick="updateIframe('tradershub')">
+                                    tradershub
+                                </button>
+                                <button class="dropdown-item" href="#" onclick="updateIframe('wallets')">
+                                    wallets
+                                </button>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+
+                <span class="total-size" id="bundleSize">Bundle Size: Loading...</span>
+            </nav>
+            <iframe
+                id="frame"
+                title="bundle-view"
+                src="./packages/core/analyzed.html"
+                style="width: 100%; border: none"
+            ></iframe>
+        </div>
+        <script
+            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+            integrity="sha256-CDOy6cOibCWEdsRiZuaHf8dSGGJRYuBGC+mjoJimHGw="
+            crossorigin="anonymous"
+        ></script>
+        <script>
+            async function updateIframe(packageName) {
+                const iframeSrc = './packages/' + packageName + '/analyzed.html';
+                document.getElementById('frame').src = iframeSrc;
+                document.getElementById('navbarDropdownMenuLink').textContent =
+                    packageName.charAt(0).toUpperCase() + packageName.slice(1);
+                updateBundleSize(packageName);
+            }
+
+            async function updateBundleSize(packageName) {
+                const response = await fetch(`./packages/${packageName}/report.json`);
+                if (!response.ok) {
+                    document.getElementById('bundleSize').textContent = 'Bundle Size: Error loading data';
+                    return;
+                }
+                const data = await response.json();
+                const totalStatSize = data.reduce((acc, item) => acc + item.statSize, 0);
+                const totalParsedSize = data.reduce((acc, item) => acc + item.parsedSize, 0);
+                const totalGzipSize = data.reduce((acc, item) => acc + item.gzipSize, 0);
+                document.getElementById('bundleSize').innerHTML =
+                    '<strong>Stat Size:</strong> ' +
+                    formatBytes(totalStatSize) +
+                    ', <strong>Parsed Size:</strong> ' +
+                    formatBytes(totalParsedSize) +
+                    ', <strong>Gzip Size:</strong> ' +
+                    formatBytes(totalGzipSize);
+            }
+
+            function formatBytes(bytes, decimals = 2) {
+                if (bytes === 0) return '0 Bytes';
+                const k = 1024;
+                const dm = decimals < 0 ? 0 : decimals;
+                const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+                const i = Math.floor(Math.log(bytes) / Math.log(k));
+                return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+            }
+
+            function updateLabelOnStart() {
+                updateIframe('core');
+            }
+        </script>
+    </body>
+</html>
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
         "ts-jest": "^26.4.2"
     },
     "scripts": {
+        "analyze": "nx run-many --target=analyze",
         "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",
         "build:one": "f () { nx build @deriv/$1 $2 ;}; f",
         "build:since": "nx affected --target=build",

diff --git a/packages/account-v2/package.json b/packages/account-v2/package.json
@@ -6,7 +6,8 @@
         "node": "18.x"
     },
     "scripts": {
-        "build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.ts\"",
+        "analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
+        "build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.ts\" --profile --json > stats.json",
         "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\"",
         "start": "rimraf dist && npm run test && npm run serve"
     },

diff --git a/packages/account/package.json b/packages/account/package.json
@@ -14,9 +14,10 @@
         "node": "18.x"
     },
     "scripts": {
+        "analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
         "start": "npm run test && npm run serve",
         "serve": "echo \"Serving...\" && NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config \"./build/webpack.config.js\"",
-        "build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1;}; f",
+        "build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1 --profile --json > stats.json;}; f",
         "build:travis": "rimraf dist && webpack --config \"./build/webpack.config.js\"  --mode=production",
         "test": "echo \"No test specified\"",
         "test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",

diff --git a/packages/appstore/package.json b/packages/appstore/package.json
@@ -8,7 +8,8 @@
         "node": "18.x"
     },
     "scripts": {
-        "build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress",
+        "analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
+        "build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --profile --json > stats.json ",
         "build:travis": "rimraf dist && webpack",
         "serve": "rimraf dist && concurrently \"cross-env BUILD_MODE='serve' NODE_OPTIONS='-r ts-node/register' webpack --progress --watch\" \"tsc -w --noEmit --preserveWatchOutput\"",
         "start": "rimraf dist && npm run test && npm run serve",

diff --git a/packages/bot-web-ui/package.json b/packages/bot-web-ui/package.json
@@ -18,9 +18,10 @@
         "node": "18.x"
     },
     "scripts": {
+        "analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
         "start": "npm run test && npm run serve",
         "serve": "echo \"Serving...\" && NODE_OPTIONS='-r ts-node/register' webpack --progress --watch",
-        "build": "f () { npm run build:skeleton && NODE_OPTIONS='-r ts-node/register' webpack --progress --env base=$1 ;}; f",
+        "build": "f () { npm run build:skeleton && NODE_OPTIONS='-r ts-node/register' webpack --progress --env base=$1 --profile --json > stats.json ;}; f",
         "build:skeleton": "lerna exec --scope @deriv/bot-skeleton -- npm run build",
         "build:travis": "echo \"No build:travis specified\"",
         "test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx|spec.ts|spec.js|spec.tsx|spec.tsx)\"",

diff --git a/packages/cashier-v2/package.json b/packages/cashier-v2/package.json
@@ -7,7 +7,8 @@
         "node": "18.x"
     },
     "scripts": {
-        "build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.ts\"",
+        "analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
+        "build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.ts\" --profile --json > stats.json",
         "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\"",
         "start": "rimraf dist && npm run test && npm run serve"
     },

diff --git a/packages/cashier/package.json b/packages/cashier/package.json
@@ -25,11 +25,12 @@
         "url": "git+https://github.com/binary-com/deriv-app.git"
     },
     "scripts": {
+        "analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
         "test": "echo \"No test specified\"",
         "test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",
         "serve": "echo \"Serving...\" && NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config \"./build/webpack.config.js\"",
         "build:travis": "rimraf dist && webpack --config \"./build/webpack.config.js\"  --mode=production",
-        "build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1;}; f"
+        "build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1 --profile --json > stats.json;}; f"
     },
     "bugs": {
         "url": "https://github.com/binary-com/deriv-app/issues"

diff --git a/packages/cfd/package.json b/packages/cfd/package.json
@@ -5,9 +5,10 @@
     "main": "dist/cfd/js/cfd.js",
     "private": true,
     "scripts": {
+        "analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
         "start": "npm run test && npm run serve",
         "serve": "echo \"Serving...\" && NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config \"./build/webpack.config.js\"",
-        "build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1;}; f",
+        "build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1 --profile --json > stats.json;}; f",
         "build:travis": "echo \"No build:travis specified\"",
         "test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",
         "deploy": "echo \"No deploy specified\"",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -5,9 +5,10 @@
     "main": "index.js",
     "private": true,
     "scripts": {
+        "analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
         "start": "npm run test && npm run serve",
         "serve": "f() { echo \"Serving...\" && ./node_modules/.bin/webpack serve --config \"./build/webpack.config.js\" --env open $1;}; f",
-        "build": "f () { webpack --config \"./build/webpack.config.js\" --env base=$1 --env IS_CRYPTO_APP=${IS_CRYPTO_APP:-false};}; f",
+        "build": "f () { webpack --config \"./build/webpack.config.js\" --env base=$1 --env IS_CRYPTO_APP=${IS_CRYPTO_APP:-false} --profile --json > stats.json;}; f",
         "build:travis": "echo \"No build:travis specified\"",
         "test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",
         "deploy": "npm run build && gh-pages -d dist --remove=\"js\"",

diff --git a/packages/p2p-v2/package.json b/packages/p2p-v2/package.json
@@ -7,7 +7,8 @@
         "node": "18.x"
     },
     "scripts": {
-        "build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\"",
+        "analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
+        "build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\" --profile --json > stats.json",
         "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\"",
         "start": "rimraf dist && npm run test && npm run serve"
     },

diff --git a/packages/p2p/package.json b/packages/p2p/package.json
@@ -14,8 +14,9 @@
         "node": "18.x"
     },
     "scripts": {
+        "analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
         "test:eslint": "eslint \"./src/**/*.?(js|ts|jsx|tsx)\"",
-        "build": "rimraf lib && NODE_OPTIONS='-r ts-node/register' webpack --progress",
+        "build": "rimraf lib && NODE_OPTIONS='-r ts-node/register' webpack --progress --profile --json > stats.json",
         "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",
         "build:travis": "rimraf lib && webpack",
         "serve": "rimraf lib && cross-env BUILD_MODE='serve' NODE_OPTIONS='-r ts-node/register' webpack --progress --watch",

diff --git a/packages/reports/package.json b/packages/reports/package.json
@@ -5,9 +5,10 @@
     "main": "dist/reports/js/reports.js",
     "private": true,
     "scripts": {
+        "analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
         "start": "npm run test && npm run serve",
         "serve": "echo \"Serving...\" && NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config \"./build/webpack.config.js\"",
-        "build": "f () { NODE_OPTIONS='-r ts-node/register'  webpack --config \"./build/webpack.config.js\" --env base=$1;}; f",
+        "build": "f () { NODE_OPTIONS='-r ts-node/register'  webpack --config \"./build/webpack.config.js\" --env base=$1 --profile --json > stats.json;}; f",
         "build:travis": "echo \"No build:travis specified\"",
         "test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",
         "deploy": "echo \"No deploy specified\"",

diff --git a/packages/trader/package.json b/packages/trader/package.json
@@ -5,9 +5,10 @@
     "main": "dist/trader/js/trader.js",
     "private": true,
     "scripts": {
+        "analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
         "start": "npm run test && npm run serve",
         "serve": "echo \"Serving...\" && NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config \"./build/webpack.config.js\"",
-        "build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1;}; f",
+        "build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1 --profile --json > stats.json;}; f",
         "build:travis": "echo \"No build:travis specified\"",
         "test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",
         "deploy": "echo \"No deploy specified\"",

diff --git a/packages/tradershub/package.json b/packages/tradershub/package.json
@@ -7,7 +7,8 @@
         "node": "18.x"
     },
     "scripts": {
-        "build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\"",
+        "analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
+        "build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\" --profile --json > stats.json",
         "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\"",
         "start": "rimraf dist && npm run test && npm run serve",
         "translate": "sh ./scripts/update-translations.sh"

diff --git a/packages/wallets/package.json b/packages/wallets/package.json
@@ -7,7 +7,8 @@
         "node": "18.x"
     },
     "scripts": {
-        "build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\" && npm run translate",
+        "analyze": "webpack-bundle-analyzer --no-open -m static -r analyzed.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
+        "build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\" --profile --json > stats.json && npm run translate",
         "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\"",
         "start": "rimraf dist && npm run test && npm run serve",
         "translate": "sh ./scripts/update-translations.sh"