fix: size checking scripts

Author: kazupon

package.json

@@ -31,13 +31,12 @@
     "build:sourcemap": "pnpm build --sourcemap",
     "build:type": "./scripts/build.sh",
     "build:typed": "pnpm build core-base vue-i18n-core --withTypes",
-    "check-install": "tsx ./scripts/playwright.ts",
+    "size": "tsx ./scripts/build.ts --size && tsx ./scripts/size.ts",
     "clean": "run-p clean:*",
     "clean:coverage": "rm -rf ./coverage",
     "clean:dist": "rm -rf ./dist ./packages/**/dist ./docs/.vitepress/dist",
     "clean:docs": "trash './docs/api/!(injection).md'",
     "clean:type": "rm -rf ./temp",
-    "coverage": "opener coverage/index.html",
     "dev": "tsx ./scripts/dev.ts",
     "dev:e2e": "cross-env TZ=UTC vitest -c ./vitest.e2e.config.ts",
     "dev:eslint": "npx @eslint/config-inspector",
@@ -73,6 +72,8 @@
     "preview:size-petite-vue-i18n": "pnpm --filter @intlify/size-check-petite-vue-i18n preview",
     "preview:size-vue-i18n": "pnpm --filter @intlify/size-check-vue-i18n preview",
     "release": "bumpp package.json packages/**/package.json --commit \"release: v\" --push --tag",
+    "check-install": "tsx ./scripts/playwright.ts",
+    "coverage": "opener coverage/index.html",
     "test": "run-s lint test:cover check-install test:e2e",
     "test:cover": "pnpm test:unit --coverage",
     "test:e2e": "cross-env TZ=UTC vitest run -c ./vitest.e2e.config.ts",

packages/size-check-core/scripts/size.mjs

@@ -0,0 +1,22 @@
+import { brotliCompressSync, gzipSync } from 'node:zlib'
+import { build } from 'vite'
+
+const generated = await build({
+  logLevel: 'silent',
+  build: {
+    minify: true
+  }
+})
+const bundled = generated.output[0].code
+
+const size = bundled.length
+const gzip = gzipSync(bundled).length
+const brotli = brotliCompressSync(bundled).length
+
+const report = {
+  name: '@intlify/core',
+  size,
+  gzip,
+  brotli
+}
+console.log(JSON.stringify(report))

packages/size-check-petite-vue-i18n/scripts/size.mjs

@@ -0,0 +1,22 @@
+import { brotliCompressSync, gzipSync } from 'node:zlib'
+import { build } from 'vite'
+
+const generated = await build({
+  logLevel: 'silent',
+  build: {
+    minify: true
+  }
+})
+const bundled = generated.output[0].code
+
+const size = bundled.length
+const gzip = gzipSync(bundled).length
+const brotli = brotliCompressSync(bundled).length
+
+const report = {
+  name: 'petite-vue-i18n',
+  size,
+  gzip,
+  brotli
+}
+console.log(JSON.stringify(report))

packages/size-check-vue-i18n/scripts/size.mjs

@@ -0,0 +1,22 @@
+import { brotliCompressSync, gzipSync } from 'node:zlib'
+import { build } from 'vite'
+
+const generated = await build({
+  logLevel: 'silent',
+  build: {
+    minify: true
+  }
+})
+const bundled = generated.output[0].code
+
+const size = bundled.length
+const gzip = gzipSync(bundled).length
+const brotli = brotliCompressSync(bundled).length
+
+const report = {
+  name: 'vue-i18n',
+  size,
+  gzip,
+  brotli
+}
+console.log(JSON.stringify(report))

scripts/build.sh

@@ -2,6 +2,6 @@
 
 set -e
 
-pnpm build --withTypes --size
+pnpm build --withTypes
 
 tsx ./scripts/postprocess.ts

scripts/build.ts

@@ -27,6 +27,7 @@ import pc from 'picocolors'
 import {
   targets as allTargets,
   checkSizeDistFiles,
+  displaySize,
   fuzzyMatchTarget,
   readJson
 } from './utils'
@@ -282,16 +283,12 @@ async function main() {
     const file = await fs.readFile(filePath)
     const filename = path.basename(filePath)
 
-    const minSize = (file.length / 1024).toFixed(2) + 'kb'
     const gzipped = gzipSync(file)
-    const gzippedSize = (gzipped.length / 1024).toFixed(2) + 'kb'
-    const compressed = brotliCompressSync(file)
-    const compressedSize =
-      compressed != null ? (compressed.length / 1024).toFixed(2) + 'kb' : 'N/A'
+    const brotli = brotliCompressSync(file)
     console.log(
-      `📦  ${pc.gray(
+      `📦  ${pc.green(
         pc.bold(path.basename(filePath))
-      )} min:${minSize} / gzip:${gzippedSize} / brotli:${compressedSize}`
+      )} - min: ${displaySize(file.length)} / gzip: ${displaySize(gzipped.length)} / brotli: ${displaySize(brotli.length)}`
     )
 
     if (size) {
@@ -300,7 +297,7 @@ async function main() {
           file: filename,
           size: file.length,
           gzip: gzipped.length,
-          brotli: compressed.length
+          brotli: brotli.length
         },
         null,
         2

scripts/size.ts

@@ -0,0 +1,56 @@
+import { spawnSync } from 'node:child_process'
+import { promises as fs } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import pc from 'picocolors'
+import { displaySize, sizeTargets } from './utils'
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
+const sizeDir = path.resolve(__dirname, '../temp/size')
+
+type BundleReport = {
+  name: string
+  size: number
+  gzip: number
+  brotli: number
+}
+
+async function main() {
+  console.log('📏 Checking bundle sizes ...')
+  console.log()
+  const targets = await sizeTargets()
+  const results: BundleReport[] = []
+  for (const target of targets) {
+    const root = path.resolve(__dirname, `../packages/${target}`)
+    results.push(bundle(root))
+  }
+
+  for (const result of results) {
+    console.log(
+      `${pc.green(pc.bold(result.name))} - ` +
+        `min: ${displaySize(result.size)} / ` +
+        `gzip: ${displaySize(result.gzip)} / ` +
+        `brotli: ${displaySize(result.brotli)}`
+    )
+  }
+
+  await fs.mkdir(sizeDir, { recursive: true })
+  await fs.writeFile(
+    path.resolve(sizeDir, '_usages.json'),
+    JSON.stringify(Object.fromEntries(results.map(r => [r.name, r])), null, 2),
+    'utf-8'
+  )
+}
+
+function bundle(target: string) {
+  const orgDir = process.cwd()
+  process.chdir(target)
+  const result = spawnSync('node', ['scripts/size.mjs'])
+  process.chdir(orgDir)
+  return JSON.parse(result.stdout.toString()) as BundleReport
+}
+
+main().catch(err => {
+  console.error(err)
+  process.exit(1)
+})

scripts/utils.ts

@@ -54,6 +54,26 @@ export const fuzzyMatchTarget = async (
   }
 }
 
+export async function sizeTargets() {
+  const packages = await fs.readdir('packages')
+  const files = await Promise.all(
+    packages.map(async f => {
+      const stat = await fs.stat(`packages/${f}`)
+      if (!stat.isDirectory()) {
+        return ''
+      }
+      const pkg = await readJson(
+        resolve(dirname(''), `./packages/${f}/package.json`)
+      )
+      if (!pkg.private) {
+        return ''
+      }
+      return f
+    })
+  )
+  return files.filter((_, f) => files[f]).filter(f => /size-check/.test(f))
+}
+
 export async function checkSizeDistFiles(target: string) {
   const dirs = await fs.readdir(`${target}/dist`)
   // prettier-ignore
@@ -67,3 +87,12 @@ export async function readJson(path: string) {
   const data = await fs.readFile(path, 'utf8')
   return JSON.parse(data)
 }
+
+const NUMBER_FORMATTER = new Intl.NumberFormat('en', {
+  maximumFractionDigits: 2,
+  minimumFractionDigits: 2
+})
+
+export function displaySize(bytes: number) {
+  return `${NUMBER_FORMATTER.format(bytes / 1000)} kB`
+}