Add loading time check on CI (#2163)

# Summary
- This PR started as an attempt to make CI use the `@size-limit/time`
plugin to measure the execution time of each client bundle and ensure it
doesn't exceed the base branch execution time by more than 20%.
- Later, found that the `@size-limit/time` plugin is not good at all at
detecting that because of the runtime noise on CI.
- So, CI will only look for the `download time` of chunks at the browser
for now, until finding another tool that run the code multiple time on
CI and get average execution time to get rid of runtime noise.
- However, the following changes are made:
- The feature of measring the execution time and comparing it to the
base branch is already added to the `bin/compare-bundle-sizes` script,
so if you can run it locally with a noise mitigated environment you can
do that by changing the `running` values at `.size-limit.json` file to
`true`.
- Removed the `compare` command from the `scripts/bundle-size.mjs`
script as it's not needed and used the default comparison behavior at
the `size-limit` package.

Author: AbanoubGhadban

.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
@@ -108,6 +108,9 @@ jobs:
       - name: Copy .size-limit.json file with limits to tmp directory
         run: cp .size-limit.json /tmp/.size-limit-with-limits.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

.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).
 

packages/react-on-rails-pro/temp.js

@@ -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)}`);