diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml index 3562fc73bd..46b93f713f 100644 --- a/.github/workflows/bundle-size.yml +++ b/.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 diff --git a/.size-limit.json b/.size-limit.json index 02f07c5fe4..052c1c41b8 100644 --- a/.size-limit.json +++ b/.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 } ] diff --git a/CHANGELOG.md b/CHANGELOG.md index a4199cafae..a59ebacd2c 100644 --- a/CHANGELOG.md +++ b/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). diff --git a/package.json b/package.json index 29b3e30c29..d7a9556b9c 100644 --- a/package.json +++ b/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\"", diff --git a/packages/react-on-rails-pro/temp.js b/packages/react-on-rails-pro/temp.js deleted file mode 100644 index e921523b1b..0000000000 --- a/packages/react-on-rails-pro/temp.js +++ /dev/null @@ -1 +0,0 @@ -console.log('hello'); diff --git a/scripts/bundle-size.mjs b/scripts/bundle-size.mjs index 2276c49b40..5edab8252c 100644 --- a/scripts/bundle-size.mjs +++ b/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)}`);