[WIP]Build & HMR performanmce metrics

bench/nested-deps/bench.mjs

@@ -1,4 +1,6 @@
-import { spawn } from 'child_process'
+import { execSync, spawn } from 'child_process'
+import { join } from 'path'
+import { fileURLToPath } from 'url'
 import fetch from 'node-fetch'
 import {
   existsSync,
@@ -9,6 +11,8 @@ import {
 } from 'fs'
 import treeKill from 'tree-kill'
 
+const ROOT_DIR = join(fileURLToPath(import.meta.url), '..', '..', '..')
+
 async function killApp(instance) {
   await new Promise((resolve, reject) => {
     treeKill(instance.pid, (err) => {
@@ -86,25 +90,27 @@ class File {
 }
 
 function runNextCommandDev(argv, opts = {}) {
-  const nextBin = '../../node_modules/.bin/next'
   const cwd = process.cwd()
+  const nextBin = join(
+    ROOT_DIR,
+    'node_modules',
+    '.bin',
+    `next${process.platform === 'win32' ? '.cmd' : ''}`
+  )
   const env = {
     ...process.env,
     NODE_ENV: undefined,
     __NEXT_TEST_MODE: 'true',
+    FORCE_COLOR: 3,
     ...opts.env,
   }
 
   const nodeArgs = opts.nodeArgs || []
   return new Promise((resolve, reject) => {
-    const instance = spawn(
-      'node',
-      [...nodeArgs, '--no-deprecation', nextBin, ...argv],
-      {
-        cwd,
-        env,
-      }
-    )
+    const instance = spawn(nextBin, [...nodeArgs, ...argv], {
+      cwd,
+      env,
+    })
     let didResolve = false
 
     function handleStdout(data) {
@@ -120,6 +126,7 @@ function runNextCommandDev(argv, opts = {}) {
         if (!didResolve) {
           didResolve = true
           resolve(instance)
+          instance.removeListener('data', handleStdout)
         }
       }
 
@@ -165,35 +172,74 @@ function waitFor(millis) {
   return new Promise((resolve) => setTimeout(resolve, millis))
 }
 
-async function main() {
-  await fs.rmDir('.next', { recursive: true })
-  const file = new File('pages/index.jsx')
-  try {
-    const instance = await runNextCommandDev(['dev', '--port', '3000'])
-    const res = await fetch('http://localhost:3000/')
-    if (res.status !== 200) {
-      throw new Error('Fetching / failed')
-    }
+await fs.rm('.next', { recursive: true }).catch(() => {})
+const file = new File('pages/index.jsx')
+const results = []
+
+try {
+  const instance = await runNextCommandDev(['dev', '--port', '3000'])
+
+  function waitForCompiled() {
+    return new Promise((resolve) => {
+      function waitForOnData(data) {
+        const message = data.toString()
+        const compiledRegex =
+          /compiled client and server successfully in (\d*[.]?\d+)\s*(m?s) \((\d+) modules\)/gm
+        const matched = compiledRegex.exec(message)
+        if (matched) {
+          resolve({
+            'time (ms)': (matched[2] === 's' ? 1000 : 1) * Number(matched[1]),
+            modules: Number(matched[3]),
+          })
+          instance.stdout.removeListener('data', waitForOnData)
+        }
+      }
+      instance.stdout.on('data', waitForOnData)
+    })
+  }
 
-    await waitFor(3000)
+  const [res, initial] = await Promise.all([
+    fetch('http://localhost:3000/'),
+    waitForCompiled(),
+  ])
+  if (res.status !== 200) {
+    throw new Error('Fetching / failed')
+  }
 
-    file.prepend('// First edit')
+  results.push(initial)
 
-    await waitFor(5000)
+  file.prepend('// First edit')
 
-    file.prepend('// Second edit')
+  results.push(await waitForCompiled())
 
-    await waitFor(5000)
+  await waitFor(1000)
 
-    file.prepend('// Third edit')
+  file.prepend('// Second edit')
 
-    await waitFor(5000)
+  results.push(await waitForCompiled())
 
-    await killApp(instance)
-    await fs.rmDir('.next', { recursive: true })
-  } finally {
-    file.restore()
-  }
-}
+  await waitFor(1000)
+
+  file.prepend('// Third edit')
+
+  results.push(await waitForCompiled())
 
-main()
+  console.table(results)
+
+  await killApp(instance)
+  await fs.rm('.next', { recursive: true })
+
+  execSync('yarn clean-trace-jaeger', {
+    cwd: ROOT_DIR,
+    stdio: 'inherit',
+  })
+  const traceString = await fs.readFile('./.next/trace', 'utf8')
+  const traces = traceString
+    .split('\n')
+    .filter((line) => line)
+    .map((line) => JSON.parse(line))
+  const { duration } = traces.pop().find(({ name }) => name === 'next-build')
+  console.log(duration)
+} finally {
+  file.restore()
+}

bench/nested-deps/package.json

@@ -1,4 +1,7 @@
 {
+  "name": "nested-deps",
+  "version": "0.0.0",
+  "private": true,
   "scripts": {
     "prepare": "rimraf components && mkdir components && node ./fuzzponent.js -d 2 -s 206 -o components",
     "dev": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK5=1 node ../../node_modules/next/dist/bin/next dev",

package.json

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "bench/nested-deps"
   ],
   "scripts": {
     "new-error": "plop error",
@@ -38,7 +39,7 @@
     "next": "node --trace-deprecation --enable-source-maps packages/next/dist/bin/next",
     "next-react-18": "node --trace-deprecation --enable-source-maps -r ./test/integration/react-18/test/require-hook.js packages/next/dist/bin/next",
     "next-no-sourcemaps": "node --trace-deprecation packages/next/dist/bin/next",
-    "clean-trace-jaeger": "rm -rf test/integration/basic/.next && TRACE_TARGET=JAEGER node --trace-deprecation --enable-source-maps packages/next/dist/bin/next build test/integration/basic",
+    "clean-trace-jaeger": "yarn --cwd bench/nested-deps prepare && rm -rf bench/nested-deps/.next && cross-env TRACE_TARGET=JAEGER node --trace-deprecation --enable-source-maps packages/next/dist/bin/next build bench/nested-deps",
     "debug": "node --inspect packages/next/dist/bin/next",
     "postinstall": "git config feature.manyFiles true && node scripts/install-native.mjs"
   },
@@ -148,9 +149,9 @@
     "react-dom": "17.0.2",
     "react-dom-18": "npm:react-dom@18.0.0-rc.0",
     "react-ssr-prepass": "1.0.8",
+    "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",
     "relay-runtime": "13.0.2",
-    "react-virtualized": "9.22.3",
     "release": "6.3.0",
     "request-promise-core": "1.1.2",
     "resolve-from": "5.0.0",
@@ -169,6 +170,7 @@
     "web-streams-polyfill": "2.1.1",
     "webpack": "link:./node_modules/webpack5",
     "webpack-bundle-analyzer": "4.3.0",
+    "webpack-sources": "link:./node_modules/webpack-sources3",
     "worker-loader": "3.0.7"
   },
   "resolutions": {

yarn.lock

@@ -14634,6 +14634,7 @@ minipass-fetch@^1.3.0, minipass-fetch@^1.3.2:
   resolved "https://registry.yarnpkg.com/minipass-fetch/-/minipass-fetch-1.3.3.tgz#34c7cea038c817a8658461bf35174551dce17a0a"
   integrity sha512-akCrLDWfbdAWkMLBxJEeWTdNsjML+dt5YgOI4gJ53vuO0vrmYQkUPxa6j6V65s9CcePIr2SSWqjT2EcrNseryQ==
   dependencies:
+    encoding "^0.1.12"
     minipass "^3.1.0"
     minipass-sized "^1.0.3"
     minizlib "^2.0.0"
@@ -21162,12 +21163,20 @@ webpack-bundle-analyzer@4.3.0:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-"webpack-sources3@npm:webpack-sources@3.2.3", webpack-sources@^3.2.3:
-  name webpack-sources3
+"webpack-sources3@npm:webpack-sources@3.2.3":
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
+webpack-sources@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
+  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
+
+"webpack-sources@link:./node_modules/webpack-sources3":
+  version "0.0.0"
+  uid ""
+
 "webpack4@npm:webpack@4.44.1":
   version "4.44.1"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.1.tgz#17e69fff9f321b8f117d1fda714edfc0b939cc21"