Improve compile time on large application

packages/next/package.json

@@ -89,6 +89,7 @@
     "caniuse-lite": "^1.0.30001406",
     "postcss": "8.4.14",
     "styled-jsx": "5.1.1",
+    "watchpack": "2.4.0",
     "zod": "3.21.4"
   },
   "peerDependencies": {

packages/next/src/cli/next-dev.ts

@@ -20,7 +20,7 @@ import { findPagesDir } from '../lib/find-pages-dir'
 import { findRootDir } from '../lib/find-root'
 import { fileExists, FileType } from '../lib/file-exists'
 import { getNpxCommand } from '../lib/helpers/get-npx-command'
-import Watchpack from 'next/dist/compiled/watchpack'
+import Watchpack from 'watchpack'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
 import { getPossibleInstrumentationHookFilenames } from '../build/worker'
 
@@ -479,7 +479,9 @@ const nextDev: CliCommand = async (argv) => {
           }
 
           previousInstrumentationFiles.clear()
-          knownFiles.forEach((_, key) => previousInstrumentationFiles.add(key))
+          knownFiles.forEach((_: any, key: any) =>
+            previousInstrumentationFiles.add(key)
+          )
         })
 
         const projectFolderWatcher = new Watchpack({

packages/next/src/server/dev/next-dev-server.ts

@@ -17,7 +17,7 @@ import fs from 'fs'
 import { Worker } from 'next/dist/compiled/jest-worker'
 import findUp from 'next/dist/compiled/find-up'
 import { join as pathJoin, relative, resolve as pathResolve, sep } from 'path'
-import Watchpack from 'next/dist/compiled/watchpack'
+import Watchpack from 'watchpack'
 import { ampValidation } from '../../build/output'
 import {
   INSTRUMENTATION_HOOK_FILENAME,
@@ -128,7 +128,7 @@ export interface Options extends ServerOptions {
 export default class DevServer extends Server {
   private devReady: Promise<void>
   private setDevReady?: Function
-  private webpackWatcher?: Watchpack | null
+  private webpackWatcher?: any | null
   private hotReloader?: HotReloader
   private isCustomServer: boolean
   protected sortedRoutes?: string[]

packages/next/taskfile.js

@@ -591,13 +591,7 @@ export async function ncc_next_font(task, opts) {
 }
 
 // eslint-disable-next-line camelcase
-externals['watchpack'] = 'next/dist/compiled/watchpack'
-export async function ncc_watchpack(task, opts) {
-  await task
-    .source(relative(__dirname, require.resolve('watchpack')))
-    .ncc({ packageName: 'watchpack', externals })
-    .target('src/compiled/watchpack')
-}
+externals['watchpack'] = 'watchpack'
 
 // eslint-disable-next-line camelcase
 externals['jest-worker'] = 'next/dist/compiled/jest-worker'
@@ -2195,7 +2189,6 @@ export async function ncc(task, opts) {
     .parallel(
       [
         'ncc_node_html_parser',
-        'ncc_watchpack',
         'ncc_chalk',
         'ncc_napirs_triples',
         'ncc_p_limit',

packages/next/types/misc.d.ts

@@ -156,6 +156,10 @@ declare module 'next/dist/compiled/babel/preset-env' {
   const anyType: any
   export default anyType
 }
+declare module 'watchpack' {
+  const anyType: any
+  export default anyType
+}
 declare module 'next/dist/compiled/babel/core' {
   export * from '@babel/core'
 }