From afe0f6c86f49f2995f8d84b815151c8e36241849 Mon Sep 17 00:00:00 2001 From: southclaws Date: Thu, 28 Dec 2023 11:20:10 +0000 Subject: [PATCH 1/5] try nextjs bundle analysis --- .github/workflows/nextjs_bundle_analysis.yml | 129 +++++++++++++++++++ web/package.json | 6 + 2 files changed, 135 insertions(+) create mode 100644 .github/workflows/nextjs_bundle_analysis.yml diff --git a/.github/workflows/nextjs_bundle_analysis.yml b/.github/workflows/nextjs_bundle_analysis.yml new file mode 100644 index 000000000..c896f55af --- /dev/null +++ b/.github/workflows/nextjs_bundle_analysis.yml @@ -0,0 +1,129 @@ +# Copyright (c) HashiCorp, Inc. +# SPDX-License-Identifier: MPL-2.0 + +name: "Next.js Bundle Analysis" + +on: + pull_request: + push: + branches: + - main # change this if your default branch is named differently + workflow_dispatch: + +defaults: + run: + # change this if your nextjs app does not live at the root of the repo + working-directory: ./web + +permissions: + contents: read # for checkout repository + actions: read # for fetching base branch bundle stats + pull-requests: write # for comments + +jobs: + analyze: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + + - name: Install Node.js + uses: actions/setup-node@v3 + with: + node-version: 18 + + - name: Install dependencies + uses: bahmutov/npm-install@v1 + + # If pnpm is used, you need to switch the previous step with the following one. pnpm does not create a package-lock.json + # so the step above will fail to pull dependencies + # - uses: pnpm/action-setup@v2 + # name: Install pnpm + # id: pnpm-install + # with: + # version: 7 + # run_install: true + + - name: Restore next build + uses: actions/cache@v3 + id: restore-build-cache + env: + cache-name: cache-next-build + with: + # if you use a custom build directory, replace all instances of `.next` in this file with your build directory + # ex: if your app builds to `dist`, replace `.next` with `dist` + path: .next/cache + # change this if you prefer a more strict cache + key: ${{ runner.os }}-build-${{ env.cache-name }} + + - name: Build next.js app + # change this if your site requires a custom build command + run: ./node_modules/.bin/next build + + # Here's the first place where next-bundle-analysis' own script is used + # This step pulls the raw bundle stats for the current bundle + - name: Analyze bundle + run: npx -p nextjs-bundle-analysis report + + - name: Upload bundle + uses: actions/upload-artifact@v3 + with: + name: bundle + path: .next/analyze/__bundle_analysis.json + + - name: Download base branch bundle stats + uses: dawidd6/action-download-artifact@v2 + if: success() && github.event.number + with: + workflow: nextjs_bundle_analysis.yml + branch: ${{ github.event.pull_request.base.ref }} + path: .next/analyze/base + + # And here's the second place - this runs after we have both the current and + # base branch bundle stats, and will compare them to determine what changed. + # There are two configurable arguments that come from package.json: + # + # - budget: optional, set a budget (bytes) against which size changes are measured + # it's set to 350kb here by default, as informed by the following piece: + # https://infrequently.org/2021/03/the-performance-inequality-gap/ + # + # - red-status-percentage: sets the percent size increase where you get a red + # status indicator, defaults to 20% + # + # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis` + # entry in your package.json file. + - name: Compare with base branch bundle + if: success() && github.event.number + run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare + + - name: Get Comment Body + id: get-comment-body + if: success() && github.event.number + # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings + run: | + echo "body<> $GITHUB_OUTPUT + echo "$(cat .next/analyze/__bundle_analysis_comment.txt)" >> $GITHUB_OUTPUT + echo EOF >> $GITHUB_OUTPUT + + - name: Find Comment + uses: peter-evans/find-comment@v2 + if: success() && github.event.number + id: fc + with: + issue-number: ${{ github.event.number }} + body-includes: "" + + - name: Create Comment + uses: peter-evans/create-or-update-comment@v2 + if: success() && github.event.number && steps.fc.outputs.comment-id == 0 + with: + issue-number: ${{ github.event.number }} + body: ${{ steps.get-comment-body.outputs.body }} + + - name: Update Comment + uses: peter-evans/create-or-update-comment@v2 + if: success() && github.event.number && steps.fc.outputs.comment-id != 0 + with: + issue-number: ${{ github.event.number }} + body: ${{ steps.get-comment-body.outputs.body }} + comment-id: ${{ steps.fc.outputs.comment-id }} + edit-mode: replace diff --git a/web/package.json b/web/package.json index 6925583f3..fd6169f74 100644 --- a/web/package.json +++ b/web/package.json @@ -57,5 +57,11 @@ }, "resolutions": { "@ark-ui/react": "^1.2.1" + }, + "nextBundleAnalysis": { + "budget": 358400, + "budgetPercentIncreaseRed": 20, + "minimumChangeThreshold": 0, + "showDetails": true } } \ No newline at end of file From e8c37fb84c961b9ebee97b4a2351988705b89db4 Mon Sep 17 00:00:00 2001 From: southclaws Date: Thu, 28 Dec 2023 11:26:17 +0000 Subject: [PATCH 2/5] fix paths --- .github/workflows/nextjs_bundle_analysis.yml | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/.github/workflows/nextjs_bundle_analysis.yml b/.github/workflows/nextjs_bundle_analysis.yml index c896f55af..2f9a1af71 100644 --- a/.github/workflows/nextjs_bundle_analysis.yml +++ b/.github/workflows/nextjs_bundle_analysis.yml @@ -10,11 +10,6 @@ on: - main # change this if your default branch is named differently workflow_dispatch: -defaults: - run: - # change this if your nextjs app does not live at the root of the repo - working-directory: ./web - permissions: contents: read # for checkout repository actions: read # for fetching base branch bundle stats @@ -62,13 +57,15 @@ jobs: # Here's the first place where next-bundle-analysis' own script is used # This step pulls the raw bundle stats for the current bundle - name: Analyze bundle - run: npx -p nextjs-bundle-analysis report + run: | + cd web + npx -p nextjs-bundle-analysis report - name: Upload bundle uses: actions/upload-artifact@v3 with: name: bundle - path: .next/analyze/__bundle_analysis.json + path: web/.next/analyze/__bundle_analysis.json - name: Download base branch bundle stats uses: dawidd6/action-download-artifact@v2 @@ -76,7 +73,7 @@ jobs: with: workflow: nextjs_bundle_analysis.yml branch: ${{ github.event.pull_request.base.ref }} - path: .next/analyze/base + path: web/.next/analyze/base # And here's the second place - this runs after we have both the current and # base branch bundle stats, and will compare them to determine what changed. @@ -93,13 +90,16 @@ jobs: # entry in your package.json file. - name: Compare with base branch bundle if: success() && github.event.number - run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare + run: | + cd web + ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare - name: Get Comment Body id: get-comment-body if: success() && github.event.number # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings run: | + cd web echo "body<> $GITHUB_OUTPUT echo "$(cat .next/analyze/__bundle_analysis_comment.txt)" >> $GITHUB_OUTPUT echo EOF >> $GITHUB_OUTPUT From de870819463f2839e7e43434936c3896be609074 Mon Sep 17 00:00:00 2001 From: southclaws Date: Thu, 28 Dec 2023 11:28:54 +0000 Subject: [PATCH 3/5] paths --- .github/workflows/nextjs_bundle_analysis.yml | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/.github/workflows/nextjs_bundle_analysis.yml b/.github/workflows/nextjs_bundle_analysis.yml index 2f9a1af71..b94a2e6ce 100644 --- a/.github/workflows/nextjs_bundle_analysis.yml +++ b/.github/workflows/nextjs_bundle_analysis.yml @@ -28,6 +28,8 @@ jobs: - name: Install dependencies uses: bahmutov/npm-install@v1 + with: + working-directory: web # If pnpm is used, you need to switch the previous step with the following one. pnpm does not create a package-lock.json # so the step above will fail to pull dependencies @@ -46,13 +48,15 @@ jobs: with: # if you use a custom build directory, replace all instances of `.next` in this file with your build directory # ex: if your app builds to `dist`, replace `.next` with `dist` - path: .next/cache + path: web/.next/cache # change this if you prefer a more strict cache key: ${{ runner.os }}-build-${{ env.cache-name }} - name: Build next.js app # change this if your site requires a custom build command - run: ./node_modules/.bin/next build + run: | + cd web + ./node_modules/.bin/next build # Here's the first place where next-bundle-analysis' own script is used # This step pulls the raw bundle stats for the current bundle From d490240e63984543057e38b323bfb302d71434d5 Mon Sep 17 00:00:00 2001 From: southclaws Date: Thu, 28 Dec 2023 11:34:42 +0000 Subject: [PATCH 4/5] use experimental-compile --- .github/workflows/nextjs_bundle_analysis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/nextjs_bundle_analysis.yml b/.github/workflows/nextjs_bundle_analysis.yml index b94a2e6ce..e9fa03533 100644 --- a/.github/workflows/nextjs_bundle_analysis.yml +++ b/.github/workflows/nextjs_bundle_analysis.yml @@ -56,7 +56,7 @@ jobs: # change this if your site requires a custom build command run: | cd web - ./node_modules/.bin/next build + ./node_modules/.bin/next experimental-compile # Here's the first place where next-bundle-analysis' own script is used # This step pulls the raw bundle stats for the current bundle From ca793b130ed929a07518eb489312b8f6c91f2787 Mon Sep 17 00:00:00 2001 From: southclaws Date: Thu, 28 Dec 2023 11:37:14 +0000 Subject: [PATCH 5/5] remove comments --- .github/workflows/nextjs_bundle_analysis.yml | 36 +++----------------- 1 file changed, 4 insertions(+), 32 deletions(-) diff --git a/.github/workflows/nextjs_bundle_analysis.yml b/.github/workflows/nextjs_bundle_analysis.yml index e9fa03533..29017ff46 100644 --- a/.github/workflows/nextjs_bundle_analysis.yml +++ b/.github/workflows/nextjs_bundle_analysis.yml @@ -7,13 +7,13 @@ on: pull_request: push: branches: - - main # change this if your default branch is named differently + - main workflow_dispatch: permissions: - contents: read # for checkout repository - actions: read # for fetching base branch bundle stats - pull-requests: write # for comments + contents: read + actions: read + pull-requests: write jobs: analyze: @@ -31,35 +31,20 @@ jobs: with: working-directory: web - # If pnpm is used, you need to switch the previous step with the following one. pnpm does not create a package-lock.json - # so the step above will fail to pull dependencies - # - uses: pnpm/action-setup@v2 - # name: Install pnpm - # id: pnpm-install - # with: - # version: 7 - # run_install: true - - name: Restore next build uses: actions/cache@v3 id: restore-build-cache env: cache-name: cache-next-build with: - # if you use a custom build directory, replace all instances of `.next` in this file with your build directory - # ex: if your app builds to `dist`, replace `.next` with `dist` path: web/.next/cache - # change this if you prefer a more strict cache key: ${{ runner.os }}-build-${{ env.cache-name }} - name: Build next.js app - # change this if your site requires a custom build command run: | cd web ./node_modules/.bin/next experimental-compile - # Here's the first place where next-bundle-analysis' own script is used - # This step pulls the raw bundle stats for the current bundle - name: Analyze bundle run: | cd web @@ -79,19 +64,6 @@ jobs: branch: ${{ github.event.pull_request.base.ref }} path: web/.next/analyze/base - # And here's the second place - this runs after we have both the current and - # base branch bundle stats, and will compare them to determine what changed. - # There are two configurable arguments that come from package.json: - # - # - budget: optional, set a budget (bytes) against which size changes are measured - # it's set to 350kb here by default, as informed by the following piece: - # https://infrequently.org/2021/03/the-performance-inequality-gap/ - # - # - red-status-percentage: sets the percent size increase where you get a red - # status indicator, defaults to 20% - # - # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis` - # entry in your package.json file. - name: Compare with base branch bundle if: success() && github.event.number run: |