filesize-analysis라는 Giithub Action의 이야기를 만들었습니다.

황금 주간의 첫날부터 묵묵히 풀이 자라고 있었다.
filesize-analysis라는 이름의 기릿허브 액션을 제작했기 때문에 소개해드립니다.

이른바 filesize-analysis

각 PR 창고에 지정된 디렉토리에 지정된 확장자 파일의 크기를 얻어 리뷰하는 Giithub Action(이런 느낌↓).

실제 리뷰의 PR
4월 29일부터 제작을 시작해서 오늘(4월 30일) 발매됐는데 아직 퀄리티는 낮지만 제가 하고 싶은 최소한의 일은 할 수 있다고 생각해요.

배경 만들기

전방 개발에서는 응용 프로그램을 구축한 후의 파일 크기에 매우 신경을 쓴다.
예를 들어 Webpack에는 출력된 번들 파일의 크기와 번들에 장착된 모듈을 확인할 수 있는 webpack-bundle-analyzer라는 프로그램 라이브러리가 있다.
그러나 매번 요구를 할 때마다 그런 프로그램 라이브러리로 파일의 크기를 하나하나 확인하는 것은 좀 번거롭다.그리고 조금이라도 귀찮은 일은 조만간 하지 않을 것이다.(그리고 묶음 사이즈가 어느새 커져요...
따라서 엔지니어들은 각 요구 사항의 논평에 묶음 사이즈를 표시하면 안 된다고 생각한다.
Webpack이면 다음과 같은 Giithub action이 있습니다.
https://github.com/chronotruck/webpack-stats-diff-action
이 Giithub action은 매우 편리하지만 Giithub Actions의workflow는 기술량이 매우 많아졌습니다...
보고 싶으신 분들은 이쪽으로

name: Diff bundle stats

on: [pull_request]

jobs:
  build-base:
    name: Build base
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v2
      with:
        ref: ${{ github.base_ref }}

    - name: Install dependencies
      run: npm ci
      env:
        NODE_AUTH_TOKEN: ${{secrets.TOKEN_REPO}}

    - name: Build
      run: npm run build-demo

    - name: Upload base stats.json
      uses: actions/upload-artifact@v2
      with:
        name: base
        path: ./demo/demo-dist/stats.json
        retention-days: 1

  build-pr:
    name: Build PR
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v2
  
    - name: Install dependencies
      run: npm ci
      env:
        NODE_AUTH_TOKEN: ${{secrets.TOKEN_REPO}}
  
    - name: Build
      run: npm run build-demo
  
    - name: Upload base stats.json
      uses: actions/upload-artifact@v2
      with:
        name: pr
        path: ./demo/demo-dist/stats.json
        retention-days: 1

  report:
    name: Generate report
    runs-on: ubuntu-latest
    needs: [build-base, build-pr]
  
    steps:
    - name: Checkout PR
      uses: actions/checkout@v2
  
    - name: Download base stats
      uses: actions/download-artifact@v2
      with:
        name: base
        path: base
  
    - name: Download PR stats
      uses: actions/download-artifact@v2
      with:
        name: pr
        path: pr
  
    - name: Get diff
      id: get-diff
      uses: NejcZdovc/bundle-size-diff@v1
      with:
        base_path: './base/stats.json'
        pr_path: './pr/stats.json'
  
    - name: Comment
      uses: NejcZdovc/comment-[email protected]
      with:
        file: 'comment.md'
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
        OLD: ${{steps.get-diff.outputs.base_file_string}}
        NEW: ${{steps.get-diff.outputs.pr_file_string}}
        DIFF: ${{steps.get-diff.outputs.diff_file_string}}
        DIFF_PERCENT: ${{steps.get-diff.outputs.percent}}

봐주세요.
개인적으로는 CI(typecheck, Unit Test, etc...)가벼운 마음으로 워크플로우에 삽입하고 싶어서 이게...됐어.
또 webpack-bundle-analyzer에서 출력된stats.json에서 번들 사이즈 등을 끌어왔기 때문에 esbuild와vite를 사용할 때는 사용할 수 없는 거 아닌가요?내 생각엔
그래서 이번에 만들었다filesize-analysis.

filesize-analysis의 개념

filesize-analysis는 상기 배경에 따라 다음과 같은 개념으로 제작되었다.

Giithub Action 기술 감소

filesize-analysis를 사용하는workflow의 기술량은 이것뿐입니다.
사용

on:
  pull_request:

permissions:
  pull-requests: write  # PRにコメントするために必要

jobs:
  analysis:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout PR
        uses: actions/checkout@v2

      - name: Install & Build
        run: yarn --frozen-lock && yarn build:production

      - name: Analysis
        uses: apple-yagi/filesize-analysis@v1
        with:
          out_dir: "./dist" # ファイルサイズを表示したいファイルが入っているディレクトリ
          ext: "bundle.js|chunk.js" # ファイルサイズを確認したい拡張子（単数の場合 -> "bundle.js"）
          github_token: ${{secrets.GITHUB_TOKEN}}

filesize-analysis의 step 이외에도 쓸모없는 것이 쓰여 있지만, 실질적인 마지막 6줄만 아래 평어(편리함✨).

나는 개인적으로 permissions 반드시 pull-requests: write를 주어야 한다는 점이 만족스럽지 않지만, CI의 마지막 부분의 기술량으로 파일의 사이즈를 알려준다.🎉

특정 프런트엔드 툴에 의존하지 않음

특정한 도구webpack-bundle-analyzer의 출력 결과에서 묶음 사이즈를 얻으면 다른 도구esbuild,vite 등으로 갈아타면 사용할 수 없기 때문에 이것에 의존하지 않습니다.
이 목표를 실현하기 위해 사용자가 지정한 out_dir과 ext에서 대상 파일을 추출하여 대상 파일의 크기를 봅니다.

최후

이 기사를 쓰면서 누가 이런 도구를 만들었단 말인가?이렇게 생각하면서 살짝 조사해보니 이런 걸 발견하고 스스로 이러면 되잖아...
https://github.com/marketplace/actions/compressed-size-action
단, filesize-analysis 없어도package.json 이동(특정한 프로그램 언어에 의존하지 않음) 다른 곳에서 사용할 수 있다(C나 Go를 구축한 후의 파일 크기 등?)(나는 diff를 내려면 반드시 특정한 언어를 속박해야 한다고 생각한다).