feat: compare size

Author: sxzz

.github/workflows/ci.yml

@@ -149,6 +149,6 @@ jobs:
           name: size-report
           path: temp/size-prev
 
-      - name: test
-        run: ls -l temp
+      - name: Compare size
+        run: node scripts/compare-size.js
         if: ${{ success() }}

package.json

@@ -63,6 +63,7 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.0",
+    "@sxzz/export-size": "^0.6.0",
     "@types/hash-sum": "^1.0.0",
     "@types/node": "^16.4.7",
     "@typescript-eslint/parser": "^5.56.0",
@@ -77,11 +78,11 @@
     "eslint-plugin-jest": "^27.2.1",
     "estree-walker": "^2.0.2",
     "execa": "^4.0.2",
-    "@sxzz/export-size": "^0.6.0",
     "jsdom": "^21.1.0",
     "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",

pnpm-lock.yaml

@@ -0,0 +1,140 @@
+// @ts-check
+import path from 'node:path'
+import { markdownTable } from 'markdown-table'
+import prettyBytes from 'pretty-bytes'
+import { readFile, readdir } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
+
+const currDir = path.resolve('temp/size')
+const prevDir = path.resolve('temp/size-prev')
+let output = '## Compare Size\n'
+
+run()
+
+async function run() {
+  await processExports()
+  await renderBaseline()
+  await renderFiles()
+
+  process.stdout.write(output)
+}
+
+async function renderFiles() {
+  /**
+   *
+   * @param {string[]} files
+   * @returns {string[]}
+   */
+  const filterFiles = files => files.filter(file => !file.startsWith('_'))
+
+  const curr = filterFiles(await readdir(currDir))
+  const prev = filterFiles(await readdir(prevDir))
+  const fileList = new Set([...curr, ...prev])
+
+  /** @type string[][] */
+  const rows = []
+  for (const file of fileList) {
+    const currPath = path.resolve(currDir, file)
+    const prevPath = path.resolve(prevDir, file)
+
+    let curr
+    if (existsSync(currPath)) curr = await importJSON(currPath)
+    let prev
+    if (existsSync(prevPath)) prev = await importJSON(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', 'Size', 'Gzip', 'Brotli'], ...rows])
+  output += '\n\n'
+}
+
+async function renderBaseline() {
+  const curr = await importJSON(path.resolve(currDir, '_baseline.json'))
+  const prev = await importJSON(path.resolve(prevDir, '_baseline.json'))
+  output += `### Baseline\n\n`
+  output += markdownTable([
+    ['Size', 'Gzip', 'Brotli'],
+    [
+      `${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 += '\n\n'
+}
+
+async function processExports() {
+  const curr = await importJSON(path.resolve(currDir, '_exports.json'))
+  const prev = await importJSON(path.resolve(prevDir, '_exports.json'))
+  output += '\n### Exports\n\n'
+  output += renderExports(curr, prev)
+  output += `\n\n<details>\n<summary>Show full exports</summary>\n\n${renderExports(
+    curr
+  )}\n\n</details>\n\n`
+}
+
+/** @typedef {Record<string, import('@sxzz/export-size').ExportsInfo>} ExportMap */
+
+/**
+ *
+ * @param {ExportMap} exports
+ * @param {ExportMap} [prev]
+ * @returns
+ */
+function renderExports(exports, prev) {
+  const data = Object.entries(exports)
+    .map(
+      /** @returns {any} */
+      ([key, exp]) => {
+        const prevExport = prev?.[key]
+        const diffBundled = getDiff(exp.bundled, prevExport?.bundled)
+        const diffMinified = getDiff(exp.minified, prevExport?.minified)
+        const diffMinzipped = getDiff(exp.minzipped, prevExport?.minzipped)
+        if (prev && !diffBundled && !diffMinified && !diffMinzipped) {
+          return
+        }
+
+        return [
+          exp.name,
+          `${prettyBytes(exp.bundled)}${diffBundled}`,
+          `${prettyBytes(exp.minified)}${diffMinified}`,
+          `${prettyBytes(exp.minzipped)}${diffMinzipped}`
+        ]
+      }
+    )
+    .filter(Boolean)
+  if (data.length === 0) return 'No changes'
+  return markdownTable([['Name', 'Size', 'Minified', 'Brotli'], ...data])
+}
+
+/**
+ * @param {string} path
+ */
+async function importJSON(path) {
+  return (await import(path, { assert: { type: 'json' } })).default
+}
+
+/**
+ *
+ * @param {number} curr
+ * @param {number} [prev]
+ */
+function getDiff(curr, prev) {
+  if (prev === undefined) return ''
+  const diff = curr - prev
+  if (diff === 0) return ''
+  const sign = diff > 0 ? '+' : ''
+  return ` (**${sign}${prettyBytes(diff)}**)`
+}

scripts/compare-size.js

@@ -14,10 +14,15 @@ async function main() {
     bundler: 'esbuild',
     output: false
   })
+  const functions = Object.fromEntries(
+    exports.map(exp => {
+      return [exp.name, { ...exp, file: path.basename(exp.path) }]
+    })
+  )
   await mkdir(sizeDir, { recursive: true })
   await writeFile(
     path.resolve(sizeDir, '_exports.json'),
-    JSON.stringify(exports, null, 2),
+    JSON.stringify(functions, null, 2),
     'utf-8'
   )
 }