feat: generate size info

Author: sxzz

package.json

@@ -8,8 +8,8 @@
     "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-global": "node scripts/build.js vue runtime-dom -f global -p --size",
+    "size-baseline": "node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js runtime-dom runtime-core reactivity shared -f esm-bundler && node scripts/export-size.js && cd packages/size-check && vite build && node size",
     "check": "tsc --incremental --noEmit",
     "lint": "eslint --cache --ext .ts packages/*/{src,__tests__}/**.ts",
     "format": "prettier --write --cache \"**/*.[tj]s?(x)\"",
@@ -77,6 +77,7 @@
     "eslint-plugin-jest": "^27.2.1",
     "estree-walker": "^2.0.2",
     "execa": "^4.0.2",
+    "export-size": "^0.5.2",
     "jsdom": "^21.1.0",
     "lint-staged": "^10.2.10",
     "lodash": "^4.17.15",
@@ -85,6 +86,7 @@
     "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",

packages/size-check/brotli.js

@@ -1,6 +1,7 @@
 {
   "name": "@vue/size-check",
   "version": "3.3.4",
+  "type": "module",
   "private": true,
   "scripts": {
     "build": "vite build"

packages/size-check/package.json

@@ -0,0 +1,27 @@
+// @ts-check
+import { brotliCompress, gzip } from 'node:zlib'
+import { promisify } from 'node:util'
+import { readFile, writeFile } from 'node:fs/promises'
+import path from 'node:path'
+import prettyBytes from 'pretty-bytes'
+
+run()
+
+async function run() {
+  const file = await readFile('dist/index.js')
+
+  const gzipped = await promisify(gzip)(file)
+  console.log(`gzip: ${prettyBytes(gzipped.length)}`)
+
+  const brotli = await promisify(brotliCompress)(file)
+  console.log(`brotli: ${prettyBytes(brotli.length)}`)
+
+  await writeFile(
+    path.resolve('../../temp/size/_baseline.json'),
+    JSON.stringify({
+      size: file.length,
+      gzip: gzipped.length,
+      brotli: brotli.length
+    })
+  )
+}

packages/size-check/size.js

@@ -1,4 +1,6 @@
-export default {
+import { defineConfig } from 'vite'
+
+export default defineConfig({
   define: {
     __VUE_PROD_DEVTOOLS__: false,
     __VUE_OPTIONS_API__: true
@@ -12,4 +14,4 @@ export default {
     },
     minify: 'terser'
   }
-}
+})

packages/size-check/vite.config.js renamed to packages/size-check/vite.config.ts

@@ -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 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: filePath,
+        size: file.length,
+        gzip: gzipped.length,
+        brotli: brotli.length
+      }),
+      'utf-8'
+    )
 }

pnpm-lock.yaml

@@ -0,0 +1,23 @@
+// @ts-check
+
+import { getExportsSize } from 'export-size'
+import { mkdir, writeFile } from 'fs/promises'
+import path from 'node:path'
+
+const sizeDir = path.resolve('temp/size')
+
+main()
+
+async function main() {
+  const { exports } = await getExportsSize({
+    pkg: './packages/vue',
+    bundler: 'esbuild',
+    output: false
+  })
+  await mkdir(sizeDir, { recursive: true })
+  await writeFile(
+    path.resolve(sizeDir, '_exports.json'),
+    JSON.stringify(exports, null, 2),
+    'utf-8'
+  )
+}