Add loading time check on CI

.github/workflows/bundle-size.yml

@@ -33,7 +33,7 @@ jobs:
             echo "skip=false" >> $GITHUB_OUTPUT
           fi
 
-  size:
+  check-bundle-size:
     needs: check-skip
     if: needs.check-skip.outputs.skip != 'true'
     runs-on: ubuntu-22.04
@@ -105,11 +105,14 @@ jobs:
       - name: Set dynamic limits (base + 0.5KB)
         run: node scripts/bundle-size.mjs set-limits --base /tmp/base-sizes.json
 
+      - name: Copy .size-limit.json file with limits to tmp directory
+        run: cp .size-limit.json /tmp/.size-limit-with-limits.json
+
       # 4. Run the action with dynamic limits
       - name: Check bundle size
         uses: andresz1/size-limit-action@v1
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           package_manager: pnpm
-          build_script: build
+          build_script: build-for-size-limit
           skip_step: install

.size-limit.json

@@ -4,55 +4,55 @@
     "path": "packages/react-on-rails/lib/ReactOnRails.client.js",
     "import": "ReactOnRails",
     "gzip": true,
-    "running": true
+    "running": false
   },
   {
     "name": "react-on-rails/client bundled (brotli)",
     "path": "packages/react-on-rails/lib/ReactOnRails.client.js",
     "import": "ReactOnRails",
     "brotli": true,
-    "running": true
+    "running": false
   },
   {
     "name": "react-on-rails-pro/client bundled (gzip)",
     "path": "packages/react-on-rails-pro/lib/ReactOnRails.client.js",
     "import": "ReactOnRails",
     "gzip": true,
-    "running": true
+    "running": false
   },
   {
     "name": "react-on-rails-pro/client bundled (brotli)",
     "path": "packages/react-on-rails-pro/lib/ReactOnRails.client.js",
     "import": "ReactOnRails",
     "brotli": true,
-    "running": true
+    "running": false
   },
   {
     "name": "registerServerComponent/client bundled (gzip)",
     "path": "packages/react-on-rails-pro/lib/registerServerComponent/client.js",
     "import": "registerServerComponent",
     "gzip": true,
-    "running": true
+    "running": false
   },
   {
     "name": "registerServerComponent/client bundled (brotli)",
     "path": "packages/react-on-rails-pro/lib/registerServerComponent/client.js",
     "import": "registerServerComponent",
     "brotli": true,
-    "running": true
+    "running": false
   },
   {
     "name": "wrapServerComponentRenderer/client bundled (gzip)",
     "path": "packages/react-on-rails-pro/lib/wrapServerComponentRenderer/client.js",
     "import": "wrapServerComponentRenderer",
     "gzip": true,
-    "running": true
+    "running": false
   },
   {
     "name": "wrapServerComponentRenderer/client bundled (brotli)",
     "path": "packages/react-on-rails-pro/lib/wrapServerComponentRenderer/client.js",
     "import": "wrapServerComponentRenderer",
     "brotli": true,
-    "running": true
+    "running": false
   }
 ]

CHANGELOG.md

@@ -25,7 +25,7 @@ Changes since the last non-beta release.
 
 #### Added
 
-- **Total Execution Time CI Monitoring**: Added automated execution time tracking to CI using size-limit. Compares PR client import execution times against the base branch and fails if any import increases by more than 20%. [PR 2160](https://github.com/shakacode/react_on_rails/pull/2160) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
+- **Download Time CI Monitoring**: Added automated download time tracking to CI using size-limit. Compares PR client import download times against the base branch and fails if any import increases by more than 10%. And added ability to compare the total execution time (download + running time) to the `bin/compare-bundle-sizes` script. [PR 2160](https://github.com/shakacode/react_on_rails/pull/2160) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
 
 - **Bundle Size CI Monitoring**: Added automated bundle size tracking to CI using size-limit. Compares PR bundle sizes against the base branch and fails if any package increases by more than 0.5KB. Includes local comparison tool (`bin/compare-bundle-sizes`) and bypass mechanism (`bin/skip-bundle-size-check`) for intentional size increases. [PR 2149](https://github.com/shakacode/react_on_rails/pull/2149) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
 

package.json

@@ -76,6 +76,7 @@
     "start": "nps",
     "nps": "nps",
     "build": "pnpm --filter react-on-rails run build && pnpm --filter react-on-rails-pro run build && pnpm --filter react-on-rails-pro-node-renderer run build",
+    "build-for-size-limit": "cp /tmp/.size-limit-with-limits.json .size-limit.json && pnpm build",
     "build-watch": "pnpm -r run build-watch",
     "lint": "nps eslint",
     "lint:scss": "stylelint \"react_on_rails/spec/dummy/app/assets/stylesheets/**/*.scss\" \"react_on_rails/spec/dummy/client/**/*.scss\"",

scripts/bundle-size.mjs

@@ -18,9 +18,9 @@ import fs from 'fs';
 // Intentionally strict to catch any bundle size changes early.
 // For intentional size increases, use bin/skip-bundle-size-check to bypass the CI check.
 const DEFAULT_THRESHOLD = 512;
-// 20% is a big ration, but the current approach is not accurate enough to detect rations less than that
+// 10% is a big ratio, but the current approach is not accurate enough to detect rations less than that
 // Later, we will implement performance tests that will use more accurate mechanisms and can detect smaller performance regressions
-const DEFAULT_TIME_PERCENTAGE_THRESHOLD = 0.2;
+const DEFAULT_TIME_PERCENTAGE_THRESHOLD = 0.1;
 const DEFAULT_CONFIG = '.size-limit.json';
 
 // ANSI color codes
@@ -102,11 +102,11 @@ function createLimitEntry(entry, baseEntry, threshold, timePercentageThreshold)
   console.log(`  base size: ${formatSize(baseEntry.size)}`);
   console.log(`  limit:     ${formatSize(limit)}\n`);
   const sizeLimitEntry = { ...entry, limit: `${limit} B` };
-  if (!sizeLimitEntry.running) {
+  if (!baseEntry.running && !baseEntry.loading) {
     return sizeLimitEntry;
   }
 
-  const { loading, running } = baseEntry;
+  const { loading = 0, running = 0 } = baseEntry;
   const loadingMs = loading * 1000;
   const runningMs = running * 1000;
   console.log(`  base loading time: ${formatTime(loadingMs)}`);