ci: improved size report (#8992)

Author: sxzz

.eslintrc.cjs

@@ -74,12 +74,7 @@ module.exports = {
     },
     // Node scripts
     {
-      files: [
-        'scripts/**',
-        '*.{js,ts}',
-        'packages/**/index.js',
-        'packages/size-check/**'
-      ],
+      files: ['scripts/**', '*.{js,ts}', 'packages/**/index.js'],
       rules: {
         'no-restricted-globals': 'off',
         'no-restricted-syntax': 'off'

.github/contributing.md

@@ -248,8 +248,6 @@ This repository employs a [monorepo](https://en.wikipedia.org/wiki/Monorepo) set
 
   - `template-explorer`: A development tool for debugging compiler output, continuously deployed at https://template-explorer.vuejs.org/. To run it locally, run [`nr dev-compiler`](#nr-dev-compiler).
 
-  - `size-check`: Used for checking built bundle sizes on CI.
-
 ### Importing Packages
 
 The packages can import each other directly using their package names. Note that when importing a package, the name listed in its `package.json` should be used. Most of the time the `@vue/` prefix is needed:

.github/workflows/ci.yml

@@ -114,23 +114,3 @@ jobs:
 
       - name: Run type declaration tests
         run: pnpm run test-dts
-
-  size:
-    runs-on: ubuntu-latest
-    if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name != github.repository
-    env:
-      CI_JOB_NUMBER: 1
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2
-
-      - name: Set node version to 18
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: 'pnpm'
-
-      - run: PUPPETEER_SKIP_DOWNLOAD=1 pnpm install
-      - run: pnpm run size

.github/workflows/size-report.yml

@@ -0,0 +1,61 @@
+name: size report
+
+on:
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  size:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Set node version to LTS
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+          cache: pnpm
+
+      - run: PUPPETEER_SKIP_DOWNLOAD=1 pnpm install
+      - run: pnpm run size
+
+      - name: Download Previous Size Report
+        id: download-artifact
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          branch: main
+          name: size-report
+          path: temp/size-prev
+          if_no_artifact_found: warn
+
+      - name: Upload Size Report
+        uses: actions/upload-artifact@v3
+        with:
+          name: size-report
+          path: temp/size
+
+      - name: Compare size
+        run: pnpm tsx scripts/size-report.ts > size.md
+
+      - name: Read Size Markdown
+        id: size-markdown
+        uses: juliangruber/read-file-action@v1
+        with:
+          path: ./size.md
+
+      - name: Create Comment
+        uses: actions-cool/maintain-one-comment@v3
+        with:
+          body: |
+            ${{steps.size-markdown.outputs.content}}
+            <!-- VUE_CORE_SIZE -->
+          body-include: '<!-- VUE_CORE_SIZE -->'

package.json

@@ -7,9 +7,10 @@
     "dev": "node scripts/dev.js",
     "build": "node scripts/build.js",
     "build-dts": "tsc -p tsconfig.build.json && rollup -c rollup.dts.config.js",
-    "size": "run-s size-global size-baseline",
-    "size-global": "node scripts/build.js vue runtime-dom -f global -p",
-    "size-baseline": "node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js runtime-dom runtime-core reactivity shared -f esm-bundler && cd packages/size-check && vite build && node brotli",
+    "size": "run-s \"size-*\" && tsx scripts/usage-size.ts",
+    "size-global": "node scripts/build.js vue runtime-dom -f global -p --size",
+    "size-esm-runtime": "node scripts/build.js vue -f esm-bundler-runtime",
+    "size-esm": "node scripts/build.js runtime-dom runtime-core reactivity shared -f esm-bundler",
     "check": "tsc --incremental --noEmit",
     "lint": "eslint --cache --ext .ts packages/*/{src,__tests__}/**.ts",
     "format": "prettier --write --cache \"**/*.[tj]s?(x)\"",
@@ -81,10 +82,12 @@
     "lint-staged": "^10.2.10",
     "lodash": "^4.17.15",
     "magic-string": "^0.30.0",
+    "markdown-table": "^3.0.3",
     "marked": "^4.0.10",
     "minimist": "^1.2.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.1",
+    "pretty-bytes": "^6.1.1",
     "pug": "^3.0.1",
     "puppeteer": "~19.6.0",
     "rollup": "^3.26.0",
@@ -94,9 +97,10 @@
     "semver": "^7.3.2",
     "serve": "^12.0.0",
     "simple-git-hooks": "^2.8.1",
-    "terser": "^5.15.1",
+    "terser": "^5.19.2",
     "todomvc-app-css": "^2.3.0",
     "tslib": "^2.5.0",
+    "tsx": "^3.12.7",
     "typescript": "^5.1.6",
     "vite": "^4.3.0",
     "vitest": "^0.30.1"