Optimize webpack memory cache garbage collection (#54397)

## What

Adds a reworked version of webpack's [built-in memory cache garbage
collection
plugin](https://github.com/webpack/webpack/blob/853bfda35a0080605c09e1bdeb0103bcb9367a10/lib/cache/MemoryWithGcCachePlugin.js#L15)
that is more aggressive in cleaning up unused modules than the default.

The default marks 1/5th of the modules as "up for potentially being
garbage collected". The new plugin always checks all modules. In my
testing this does not cause much overhead compared to the current
approach which leverages writing to two separate maps. The change also
makes the memory cache eviction more predictable: when an item has not
been accessed for 5 compilations it is evicted from the memory cache, it
could still be in the disk cache.


In order to test this change I had to spin up the benchmarks but these
were a bit outdated so I've cleaned up the benchmark applications.

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.eslintignore

@@ -37,8 +37,8 @@ test/production/emit-decorator-metadata/**/*.js
 test/e2e/app-dir/rsc-errors/app/swc/use-client/page.js
 test-timings.json
 packages/next-swc/crates/**
-bench/nested-deps/pages/**
-bench/nested-deps/components/**
+bench/nested-deps/**
+bench/nested-deps-app-router/**
 packages/next-bundle-analyzer/index.d.ts
 examples/with-typescript-graphql/lib/gql/
 test/development/basic/hmr/components/parse-error.js

.gitignore

@@ -17,6 +17,7 @@ test/node_modules
 *.log
 pids
 *.cpuprofile
+*.heapsnapshot
 
 # coverage
 .nyc_output

bench/app-router-server/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "bench-app-router-server",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "webpack-bundle-analyzer": "^4.6.1",
+    "webpack-stats-plugin": "^1.1.0",
+    "next": "workspace:*",
+    "next-minimal-server": "workspace:*"
+  },
+  "scripts": {
+    "build-application": "next build",
+    "start": "next-minimal-server"
+  }
+}

bench/nested-deps/fuzzponent.js → bench/fuzzponent/bin/fuzzponent.js

@@ -176,6 +176,7 @@ if (require.main === module) {
       type: 'string',
     }).argv
 
+  fs.mkdirSync(outdir, { recursive: true })
   generateFuzzponents(outdir, seed, depth, opts)
 }
 

bench/fuzzponent/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "fuzzponent",
+  "bin": {
+    "fuzzponent": "./bin/fuzzponent.js"
+  },
+  "dependencies": {
+    "@babel/types": "7.18.0",
+    "@babel/generator": "7.18.0",
+    "random-seed": "0.3.0",
+    "yargs": "16.2.0"
+  }
+}

bench/fuzzponent/readme.md

@@ -0,0 +1,39 @@
+# Fuzzponent
+
+Originally built by [Dale Bustad](https://github.com/divmain/fuzzponent) while at Vercel.
+
+[Original repository](https://github.com/divmain/fuzzponent).
+
+Generate a nested React component dependency graph, useful for benchmarking.
+
+## Example
+
+To create a dependency tree with `3020` files in the `components` directory:
+
+```
+fuzzponent --depth 2 --seed 206 --outdir components
+```
+
+You can then import the entrypoint of the dependency tree at `components/index.js`.
+
+## Options
+
+```
+Options:
+      --help       Show help                                           [boolean]
+      --version    Show version number                                 [boolean]
+  -d, --depth      component hierarchy depth                 [number] [required]
+  -s, --seed       prng seed                                 [number] [required]
+  -o, --outdir     the directory where components should be written
+     [string] [default: "/Users/timneutkens/projects/next.js/bench/nested-deps"]
+      --minLen     the smallest acceptable component name length
+                                                          [number] [default: 18]
+      --maxLen     the largest acceptable component name length
+                                                          [number] [default: 24]
+      --minChild   the smallest number of acceptable component children
+                                                           [number] [default: 4]
+      --maxChild   the largest number of acceptable component children
+                                                          [number] [default: 80]
+      --extension  extension to use for generated components
+                                                       [string] [default: "jsx"]
+```

bench/nested-deps-app-router/.gitignore

@@ -0,0 +1,2 @@
+components/*
+CPU*

bench/nested-deps-app-router/app/client-components-only/page.js

@@ -0,0 +1,13 @@
+'use client'
+import React from 'react'
+
+import Comp from '../../components/index.jsx'
+
+export default function Home() {
+  return (
+    <>
+      <h1>Hello!!!!!!!!!!!!</h1>
+      <Comp />
+    </>
+  )
+}

bench/nested-deps-app-router/app/layout.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

bench/nested-deps-app-router/app/server-and-client-components/client-component.js

@@ -0,0 +1,8 @@
+'use client'
+import React from 'react'
+
+import Comp from '../../components/index.jsx'
+
+export default function Home() {
+  return <Comp />
+}

bench/nested-deps-app-router/app/server-and-client-components/page.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import Comp from '../../components/index.jsx'
+import ClientComponent from './client-component'
+
+export default function Home() {
+  return (
+    <>
+      <Comp />
+      <ClientComponent />
+    </>
+  )
+}

bench/nested-deps-app-router/app/server-components-only/page.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import Comp from '../../components/index.jsx'
+
+export default function Home() {
+  return <Comp />
+}