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"

packages/size-check/README.md

@@ -19,12 +19,7 @@ const entries = {
   '@vue/compat': resolveEntryForPkg('vue-compat')
 }
 
-const nonSrcPackages = [
-  'sfc-playground',
-  'size-check',
-  'template-explorer',
-  'dts-test'
-]
+const nonSrcPackages = ['sfc-playground', 'template-explorer', 'dts-test']
 
 for (const dir of dirs) {
   const key = `@vue/${dir}`

packages/size-check/brotli.js

@@ -27,6 +27,7 @@ import { cpus } from 'node:os'
 import { createRequire } from 'node:module'
 import { targets as allTargets, fuzzyMatchTarget } from './utils.js'
 import { scanEnums } from './const-enum.js'
+import prettyBytes from 'pretty-bytes'
 
 const require = createRequire(import.meta.url)
 const args = minimist(process.argv.slice(2))
@@ -38,18 +39,22 @@ const buildTypes = args.withTypes || args.t
 const sourceMap = args.sourcemap || args.s
 const isRelease = args.release
 const buildAllMatching = args.all || args.a
+const writeSize = args.size
 const commit = execa.sync('git', ['rev-parse', 'HEAD']).stdout.slice(0, 7)
 
+const sizeDir = path.resolve('temp/size')
+
 run()
 
 async function run() {
+  if (writeSize) await fs.mkdir(sizeDir, { recursive: true })
   const removeCache = scanEnums()
   try {
     const resolvedTargets = targets.length
       ? fuzzyMatchTarget(targets, buildAllMatching)
       : allTargets
     await buildAll(resolvedTargets)
-    checkAllSizes(resolvedTargets)
+    await checkAllSizes(resolvedTargets)
     if (buildTypes) {
       await execa(
         'pnpm',
@@ -129,39 +134,52 @@ async function build(target) {
   )
 }
 
-function checkAllSizes(targets) {
+async function checkAllSizes(targets) {
   if (devOnly || (formats && !formats.includes('global'))) {
     return
   }
   console.log()
   for (const target of targets) {
-    checkSize(target)
+    await checkSize(target)
   }
   console.log()
 }
 
-function checkSize(target) {
+async function checkSize(target) {
   const pkgDir = path.resolve(`packages/${target}`)
-  checkFileSize(`${pkgDir}/dist/${target}.global.prod.js`)
+  await checkFileSize(`${pkgDir}/dist/${target}.global.prod.js`)
   if (!formats || formats.includes('global-runtime')) {
-    checkFileSize(`${pkgDir}/dist/${target}.runtime.global.prod.js`)
+    await checkFileSize(`${pkgDir}/dist/${target}.runtime.global.prod.js`)
   }
 }
 
-function checkFileSize(filePath) {
+async function checkFileSize(filePath) {
   if (!existsSync(filePath)) {
     return
   }
-  const file = readFileSync(filePath)
-  const minSize = (file.length / 1024).toFixed(2) + 'kb'
+  const file = await fs.readFile(filePath)
+  const fileName = path.basename(filePath)
+
   const gzipped = gzipSync(file)
-  const gzippedSize = (gzipped.length / 1024).toFixed(2) + 'kb'
-  const compressed = brotliCompressSync(file)
-  // @ts-ignore
-  const compressedSize = (compressed.length / 1024).toFixed(2) + 'kb'
+  const brotli = brotliCompressSync(file)
+
   console.log(
-    `${chalk.gray(
-      chalk.bold(path.basename(filePath))
-    )} min:${minSize} / gzip:${gzippedSize} / brotli:${compressedSize}`
+    `${chalk.gray(chalk.bold(fileName))} min:${prettyBytes(
+      file.length
+    )} / gzip:${prettyBytes(gzipped.length)} / brotli:${prettyBytes(
+      brotli.length
+    )}`
   )
+
+  if (writeSize)
+    await fs.writeFile(
+      path.resolve(sizeDir, `${fileName}.json`),
+      JSON.stringify({
+        file: fileName,
+        size: file.length,
+        gzip: gzipped.length,
+        brotli: brotli.length
+      }),
+      'utf-8'
+    )
 }

packages/size-check/package.json

@@ -0,0 +1,105 @@
+import path from 'node:path'
+import { markdownTable } from 'markdown-table'
+import prettyBytes from 'pretty-bytes'
+import { readdir } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
+
+interface SizeResult {
+  size: number
+  gzip: number
+  brotli: number
+}
+
+interface BundleResult extends SizeResult {
+  file: string
+}
+
+type UsageResult = Record<string, SizeResult & { name: string }>
+
+const currDir = path.resolve('temp/size')
+const prevDir = path.resolve('temp/size-prev')
+let output = '## Size Report\n\n'
+const sizeHeaders = ['Size', 'Gzip', 'Brotli']
+
+run()
+
+async function run() {
+  await renderFiles()
+  await renderUsages()
+
+  process.stdout.write(output)
+}
+
+async function renderFiles() {
+  const filterFiles = (files: string[]) =>
+    files.filter(file => !file.startsWith('_'))
+
+  const curr = filterFiles(await readdir(currDir))
+  const prev = existsSync(prevDir) ? filterFiles(await readdir(prevDir)) : []
+  const fileList = new Set([...curr, ...prev])
+
+  const rows: string[][] = []
+  for (const file of fileList) {
+    const currPath = path.resolve(currDir, file)
+    const prevPath = path.resolve(prevDir, file)
+
+    const curr = await importJSON<BundleResult>(currPath)
+    const prev = await importJSON<BundleResult>(prevPath)
+    const fileName = curr?.file || prev?.file || ''
+
+    if (!curr) {
+      rows.push([`~~${fileName}~~`])
+    } else
+      rows.push([
+        fileName,
+        `${prettyBytes(curr.size)}${getDiff(curr.size, prev?.size)}`,
+        `${prettyBytes(curr.gzip)}${getDiff(curr.gzip, prev?.gzip)}`,
+        `${prettyBytes(curr.brotli)}${getDiff(curr.brotli, prev?.brotli)}`
+      ])
+  }
+
+  output += '### Bundles\n\n'
+  output += markdownTable([['File', ...sizeHeaders], ...rows])
+  output += '\n\n'
+}
+
+async function renderUsages() {
+  const curr = (await importJSON<UsageResult>(
+    path.resolve(currDir, '_usages.json')
+  ))!
+  const prev = await importJSON<UsageResult>(
+    path.resolve(prevDir, '_usages.json')
+  )
+  output += '\n### Usages\n\n'
+
+  const data = Object.values(curr)
+    .map(usage => {
+      const prevUsage = prev?.[usage.name]
+      const diffSize = getDiff(usage.size, prevUsage?.size)
+      const diffGzipped = getDiff(usage.gzip, prevUsage?.gzip)
+      const diffBrotli = getDiff(usage.brotli, prevUsage?.brotli)
+
+      return [
+        usage.name,
+        `${prettyBytes(usage.size)}${diffSize}`,
+        `${prettyBytes(usage.gzip)}${diffGzipped}`,
+        `${prettyBytes(usage.brotli)}${diffBrotli}`
+      ]
+    })
+    .filter((usage): usage is string[] => !!usage)
+
+  output += `${markdownTable([['Name', ...sizeHeaders], ...data])}\n\n`
+}
+
+async function importJSON<T>(path: string): Promise<T | undefined> {
+  if (!existsSync(path)) return undefined
+  return (await import(path, { assert: { type: 'json' } })).default
+}
+
+function getDiff(curr: number, prev?: number) {
+  if (prev === undefined) return ''
+  const diff = curr - prev
+  if (diff === 0) return ''
+  const sign = diff > 0 ? '+' : ''
+  return ` (**${sign}${prettyBytes(diff)}**)`
+}

packages/size-check/src/index.ts

@@ -0,0 +1,99 @@
+import { mkdir, writeFile } from 'fs/promises'
+import path from 'node:path'
+import { rollup } from 'rollup'
+import nodeResolve from '@rollup/plugin-node-resolve'
+import { minify } from 'terser'
+import replace from '@rollup/plugin-replace'
+import { brotliCompressSync, gzipSync } from 'node:zlib'
+
+const sizeDir = path.resolve('temp/size')
+const entry = path.resolve('./packages/vue/dist/vue.runtime.esm-bundler.js')
+
+interface Preset {
+  name: string
+  imports: string[]
+}
+
+const presets: Preset[] = [
+  { name: 'createApp', imports: ['createApp'] },
+  { name: 'createSSRApp', imports: ['createSSRApp'] },
+  { name: 'defineCustomElement', imports: ['defineCustomElement'] },
+  {
+    name: 'overall',
+    imports: [
+      'createApp',
+      'ref',
+      'watch',
+      'Transition',
+      'KeepAlive',
+      'Suspense'
+    ]
+  }
+]
+
+main()
+
+async function main() {
+  const tasks: ReturnType<typeof generateBundle>[] = []
+  for (const preset of presets) {
+    tasks.push(generateBundle(preset))
+  }
+
+  const results = Object.fromEntries(
+    (await Promise.all(tasks)).map(r => [r.name, r])
+  )
+
+  await mkdir(sizeDir, { recursive: true })
+  await writeFile(
+    path.resolve(sizeDir, '_usages.json'),
+    JSON.stringify(results),
+    'utf-8'
+  )
+}
+
+async function generateBundle(preset: Preset) {
+  const id = 'virtual:entry'
+  const content = `export { ${preset.imports.join(', ')} } from '${entry}'`
+  const result = await rollup({
+    input: id,
+    plugins: [
+      {
+        name: 'usage-size-plugin',
+        resolveId(_id) {
+          if (_id === id) return id
+          return null
+        },
+        load(_id) {
+          if (_id === id) return content
+        }
+      },
+      nodeResolve(),
+      replace({
+        'process.env.NODE_ENV': '"production"',
+        __VUE_PROD_DEVTOOLS__: 'false',
+        __VUE_OPTIONS_API__: 'true',
+        preventAssignment: true
+      })
+    ]
+  })
+
+  const generated = await result.generate({})
+  const bundled = generated.output[0].code
+  const minified = (
+    await minify(bundled, {
+      module: true,
+      toplevel: true
+    })
+  ).code!
+
+  const size = minified.length
+  const gzip = gzipSync(minified).length
+  const brotli = brotliCompressSync(minified).length
+
+  return {
+    name: preset.name,
+    size,
+    gzip,
+    brotli
+  }
+}

packages/size-check/vite.config.js

@@ -9,7 +9,6 @@
     "packages/runtime-test",
     "packages/template-explorer",
     "packages/sfc-playground",
-    "packages/size-check",
     "packages/dts-test"
   ]
 }