Add running time check on ci (#2165)

# 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
@@ -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

@@ -1,107 +1,58 @@
 [
-  {
-    "name": "react-on-rails (raw)",
-    "path": "packages/react-on-rails/lib/*.js",
-    "webpack": false,
-    "gzip": false,
-    "brotli": false
-  },
-  {
-    "name": "react-on-rails (gzip)",
-    "path": "packages/react-on-rails/lib/*.js",
-    "webpack": false,
-    "gzip": true
-  },
-  {
-    "name": "react-on-rails (brotli)",
-    "path": "packages/react-on-rails/lib/*.js",
-    "webpack": false,
-    "brotli": true
-  },
-  {
-    "name": "react-on-rails-pro (raw)",
-    "path": "packages/react-on-rails-pro/lib/*.js",
-    "webpack": false,
-    "gzip": false,
-    "brotli": false
-  },
-  {
-    "name": "react-on-rails-pro (gzip)",
-    "path": "packages/react-on-rails-pro/lib/*.js",
-    "webpack": false,
-    "gzip": true
-  },
-  {
-    "name": "react-on-rails-pro (brotli)",
-    "path": "packages/react-on-rails-pro/lib/*.js",
-    "webpack": false,
-    "brotli": true
-  },
-  {
-    "name": "react-on-rails-pro-node-renderer (raw)",
-    "path": "packages/react-on-rails-pro-node-renderer/lib/*.js",
-    "webpack": false,
-    "gzip": false,
-    "brotli": false
-  },
-  {
-    "name": "react-on-rails-pro-node-renderer (gzip)",
-    "path": "packages/react-on-rails-pro-node-renderer/lib/*.js",
-    "webpack": false,
-    "gzip": true
-  },
-  {
-    "name": "react-on-rails-pro-node-renderer (brotli)",
-    "path": "packages/react-on-rails-pro-node-renderer/lib/*.js",
-    "webpack": false,
-    "brotli": true
-  },
   {
     "name": "react-on-rails/client bundled (gzip)",
     "path": "packages/react-on-rails/lib/ReactOnRails.client.js",
     "import": "ReactOnRails",
-    "gzip": true
+    "gzip": true,
+    "running": false
   },
   {
     "name": "react-on-rails/client bundled (brotli)",
     "path": "packages/react-on-rails/lib/ReactOnRails.client.js",
     "import": "ReactOnRails",
-    "brotli": true
+    "brotli": 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
+    "gzip": 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
+    "brotli": true,
+    "running": false
   },
   {
     "name": "registerServerComponent/client bundled (gzip)",
     "path": "packages/react-on-rails-pro/lib/registerServerComponent/client.js",
     "import": "registerServerComponent",
-    "gzip": true
+    "gzip": true,
+    "running": false
   },
   {
     "name": "registerServerComponent/client bundled (brotli)",
     "path": "packages/react-on-rails-pro/lib/registerServerComponent/client.js",
     "import": "registerServerComponent",
-    "brotli": true
+    "brotli": true,
+    "running": false
   },
   {
     "name": "wrapServerComponentRenderer/client bundled (gzip)",
     "path": "packages/react-on-rails-pro/lib/wrapServerComponentRenderer/client.js",
     "import": "wrapServerComponentRenderer",
-    "gzip": true
+    "gzip": true,
+    "running": false
   },
   {
     "name": "wrapServerComponentRenderer/client bundled (brotli)",
     "path": "packages/react-on-rails-pro/lib/wrapServerComponentRenderer/client.js",
     "import": "wrapServerComponentRenderer",
-    "brotli": true
+    "brotli": true,
+    "running": false
   }
 ]

CHANGELOG.md

@@ -25,6 +25,8 @@ Changes since the last non-beta release.
 
 #### Added
 
+- **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).
 
 - **Service Dependency Checking for bin/dev**: Added optional `.dev-services.yml` configuration to validate required external services (Redis, PostgreSQL, Elasticsearch, etc.) are running before `bin/dev` starts the development server. Provides clear error messages with start commands and install hints when services are missing. Zero impact if not configured - backwards compatible with all existing installations. [PR 2098](https://github.com/shakacode/react_on_rails/pull/2098) by [justin808](https://github.com/justin808).

CONTRIBUTING.md

@@ -334,7 +334,7 @@ This script automatically:
 1. Stashes any uncommitted changes
 2. Checks out and builds the base branch (default: `master`)
 3. Checks out and builds your current branch
-4. Compares the sizes and shows a detailed report
+4. Compares the size and total execution time (loading + running) and shows a detailed report
 
 Options:
 

bin/compare-bundle-sizes

@@ -25,6 +25,7 @@ BLUE='\033[0;34m'
 NC='\033[0m' # No Color
 
 cleanup() {
+  git restore .size-limit.json
   echo -e "\n${BLUE}Cleaning up...${NC}"
   git checkout "$CURRENT_BRANCH" --quiet 2>/dev/null || true
   if [ "$STASHED" = true ]; then
@@ -62,8 +63,8 @@ git checkout "$CURRENT_BRANCH" --quiet
 pnpm install --frozen-lockfile 2>&1 | grep -v "^$" | head -5 || true
 pnpm run build 2>&1 | grep -v "^$" | tail -3 || true
 
-echo -e "${BLUE}Measuring current branch sizes...${NC}"
-pnpm exec size-limit --json > /tmp/current-sizes.json
+echo -e "${BLUE}Updating limits of current branch relative to the results of the base branch...${NC}"
+node scripts/bundle-size.mjs set-limits --base /tmp/base-sizes.json
 
-# Compare sizes using the bundle-size script
-node scripts/bundle-size.mjs compare --base /tmp/base-sizes.json --current /tmp/current-sizes.json
+# Run size-limit that will use the dynamic limits created after checking base branch results
+pnpm exec size-limit

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\"",