バンドルとGithubアクションでアプリのバンドルサイズを監視します

あなたの目標は、あなたのウェブサイト/アプリケーションをロードするユーザーのためにかかる時間の量を減らすためにあなたのバンドルのサイズをできるだけ小さく保つことです.これは特に低帯域接続のユーザにとって重要である.
BundleMon あなたは常にすべてのコミットであなたのバンドルのサイズを監視することによってそれを達成することができますし、変更時に警告します.
ステップガイドでこの手順を設定するのに役立ちますBundleMon Githubアクションで

クローン・レポ

このガイドでは、このレポを使いました.https://github.com/Yog9/SnapShot

git clone https://github.com/Yog9/SnapShot

ビルド

yarn build

追加する

yarn add -D bundlemon

バンドル設定を追加する

ファイルを新規作成する.bundlemonrc.json

{
  "baseDir": "./build",
  "files": [
    {
      "path": "index.html"
    },
    {
      "path": "static/js/*.chunk.js",
      "maxPercentIncrease": 10
    },
    {
      "path": "static/js/runtime-main.*.js",
      "maxSize": "1kb"
    }
  ]
}

を実行する

yarn bundlemon

ファイル名のハッシュを無視する

変更されているファイルの新しいハッシュを生成するアプリケーションのコードを変更するWebpackが発生します.

main.e0277e23.chunk.js -> main.c2a935b4.chunk.js

ためにBangariはそれを追加する必要がある同じファイルの知っている<hash> string to file path config :

{
  "baseDir": "./build",
  "files": [
    {
      "path": "index.html"
    },
    {
      "path": "static/js/*.<hash>.chunk.js",
      "maxPercentIncrease": 10
    },
    {
      "path": "static/js/runtime-main.<hash>.js",
      "maxSize": "1kb"
    }
  ]
}

プロジェクトの作成

歴史を保存し、メインブランチとの違いを得るためには、新しいプロジェクトとセットアップ環境変数を作成する必要があります.
Create new project プロジェクトIDとAPIキーをコピーする
APIキーは秘密ですcreate encrypted secrets in GitHub

ギタブアクション

新しいファイルを作る.github/workflows/build.yml

name: Build

on:
  push:
    branches: [master]
  pull_request:
    types: [synchronize, opened, reopened]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 12
        uses: actions/setup-node@v2-beta
        with:
          node-version: "12"

      - name: Install dependencies
        run: yarn

      - name: Build
        run: yarn build

      - name: Run BundleMon
        run: yarn bundlemon
        env:
          BUNDLEMON_PROJECT_ID: YOUR_PROJECT_ID
          BUNDLEMON_PROJECT_APIKEY: ${{ secrets.BUNDLEMON_PROJECT_APIKEY }} # not required for public repos
          CI_COMMIT_SHA: ${{github.event.pull_request.head.sha || github.sha}} # important!

Make sure to set CI_COMMIT_SHA env var, more info can be found here

Github広報統合を追加

Install BundleMon GitHub App と出力設定を

"reportOutput": ["github"]

// or override default options

"reportOutput": [
  [
    "github",
    {
      "checkRun": false,
      "commitStatus": true,
      "prComment": true
    }
  ]
]

作成時first PR BunMenryを使用すると、あなたのメインブランチにレコードがないので、BangMariによって見つかったすべてのファイルが「追加」されるのを見るべきです.


したら、PR BunMariのメインブランチに記録されますので、次の広報には、PRとメインブランチの違いを参照してくださいする必要がありますマージを記録します.
このチュートリアルではhere