vue3-core/scripts/usage-size.ts

import { mkdir, writeFile } from 'node:fs/promises'
import path from 'node:path'
import { rollup } from 'rollup'
import nodeResolve from '@rollup/plugin-node-resolve'
import { minify } from '@swc/core'
import replace from '@rollup/plugin-replace'
import { brotliCompressSync, gzipSync } from 'node:zlib'
import { parseArgs } from 'node:util'
import pico from 'picocolors'
import prettyBytes from 'pretty-bytes'

const {
  values: { write },
} = parseArgs({
  options: {
    write: {
      type: 'boolean',
      default: false,
    },
  },
})

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() {
  console.log()
  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, null, 2),
    '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_PROD_HYDRATION_MISMATCH_DETAILS__: '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

  if (write) {
    await writeFile(path.resolve(sizeDir, preset.name + '.js'), bundled)
  }

  console.log(
    `${pico.green(pico.bold(preset.name))} - min:${prettyBytes(
      size,
    )} / gzip:${prettyBytes(gzip)} / brotli:${prettyBytes(brotli)}`,
  )

  return {
    name: preset.name,
    size,
    gzip,
    brotli,
  }
}