feat(build): report total build time

Author: danielroe

packages/nuxt-cli/src/commands/build.ts

@@ -7,6 +7,7 @@ import colors from 'picocolors'
 
 import { showBanner } from '../utils/banner'
 import { overrideEnv } from '../utils/env'
+import { formatDuration } from '../utils/formatting'
 import { clearBuildDir } from '../utils/fs'
 import { loadKit } from '../utils/kit'
 import { acquireLock, formatLockError } from '../utils/lockfile'
@@ -39,6 +40,8 @@ export default defineCommand({
   async run(ctx) {
     overrideEnv('production')
 
+    const start = Date.now()
+
     const cwd = resolve(ctx.args.cwd || ctx.args.rootDir)
 
     const profileArg = ctx.args.profile
@@ -127,10 +130,10 @@ export default defineCommand({
         // TODO: revisit later if/when nuxt build --prerender will output hybrid
         const dir = nitro?.options.output.publicDir
         const publicDir = dir ? relative(process.cwd(), dir) : '.output/public'
-        outro(`✨ You can now deploy ${colors.cyan(publicDir)} to any static hosting!`)
+        outro(`✨ You can now deploy ${colors.cyan(publicDir)} to any static hosting! ${colors.gray(`(${formatDuration(Date.now() - start)})`)}`)
       }
       else {
-        outro('✨ Build complete!')
+        outro(`✨ Build complete in ${colors.cyan(formatDuration(Date.now() - start))}!`)
       }
     }
     finally {

packages/nuxt-cli/src/utils/formatting.ts

@@ -97,3 +97,22 @@ export function formatInfoBox(infoObj: Record<string, string | undefined>): stri
 
   return boxStr
 }
+
+/**
+ * Format an elapsed duration in milliseconds for display, using `ms` below a
+ * second and seconds (or minutes and seconds) above it.
+ */
+export function formatDuration(ms: number): string {
+  if (ms < 1000) {
+    return `${Math.round(ms)}ms`
+  }
+
+  const totalSeconds = ms / 1000
+  if (totalSeconds < 60) {
+    return `${Number(totalSeconds.toFixed(totalSeconds < 10 ? 2 : 1))}s`
+  }
+
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = Math.round(totalSeconds - minutes * 60)
+  return seconds ? `${minutes}m ${seconds}s` : `${minutes}m`
+}

packages/nuxt-cli/test/unit/utils/formatting.spec.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+
+import { formatDuration } from '../../../src/utils/formatting'
+
+describe('formatDuration', () => {
+  it('should render sub-second durations in milliseconds', () => {
+    expect(formatDuration(0)).toBe('0ms')
+    expect(formatDuration(12.4)).toBe('12ms')
+    expect(formatDuration(999)).toBe('999ms')
+  })
+
+  it('should render seconds above a second', () => {
+    expect(formatDuration(1000)).toBe('1s')
+    expect(formatDuration(1234)).toBe('1.23s')
+    expect(formatDuration(9999)).toBe('10s')
+    expect(formatDuration(12_300)).toBe('12.3s')
+    expect(formatDuration(59_000)).toBe('59s')
+  })
+
+  it('should render minutes and seconds above a minute', () => {
+    expect(formatDuration(60_000)).toBe('1m')
+    expect(formatDuration(90_000)).toBe('1m 30s')
+    expect(formatDuration(3_600_000)).toBe('60m')
+  })
+})