perf(dev-server): make asset middleware file lookup async (#6295)

Author: chenjiahan

packages/core/src/server/assets-middleware/getFileFromUrl.ts

@@ -6,11 +6,13 @@ import type { OutputFileSystem } from './index';
 
 const UP_PATH_REGEXP = /(?:^|[\\/])\.\.(?:[\\/]|$)/;
 
-export function getFileFromUrl(
+export async function getFileFromUrl(
   url: string,
   outputFileSystem: OutputFileSystem,
   environments: Record<string, EnvironmentContext>,
-): { filename: string; fsStats: FSStats } | { errorCode: number } | undefined {
+): Promise<
+  { filename: string; fsStats: FSStats } | { errorCode: number } | undefined
+> {
   let pathname: string | undefined;
 
   try {
@@ -40,12 +42,24 @@ export function getFileFromUrl(
     Object.values(environments).map((env) => env.distPath),
   );
 
+  const stat = async (filename: string) => {
+    return new Promise<FSStats | undefined>((resolve, reject) => {
+      outputFileSystem.stat(filename, (err, stats) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(stats);
+        }
+      });
+    });
+  };
+
   for (const distPath of distPaths) {
     let filename = path.join(distPath, pathname);
     let fsStats: FSStats | undefined;
 
     try {
-      fsStats = outputFileSystem.statSync?.(filename);
+      fsStats = await stat(filename);
     } catch {
       continue;
     }
@@ -62,7 +76,7 @@ export function getFileFromUrl(
       filename = path.join(filename, 'index.html');
 
       try {
-        fsStats = outputFileSystem.statSync?.(filename);
+        fsStats = await stat(filename);
       } catch {
         continue;
       }

packages/core/src/server/assets-middleware/index.ts

@@ -6,7 +6,7 @@
  * Copyright JS Foundation and other contributors
  * https://github.com/webpack/webpack-dev-middleware/blob/master/LICENSE
  */
-import type { Stats as FSStats, ReadStream } from 'node:fs';
+import type { ReadStream } from 'node:fs';
 import { createRequire } from 'node:module';
 import type { Compiler, MultiCompiler, Watching } from '@rspack/core';
 import { applyToCompiler, isMultiCompiler } from '../../helpers';
@@ -17,6 +17,7 @@ import type {
   NormalizedDevConfig,
   NormalizedEnvironmentConfig,
   RequestHandler,
+  Rspack,
 } from '../../types';
 import { resolveHostname } from './../hmrFallback';
 import type { SocketServer } from '../socketServer';
@@ -28,14 +29,12 @@ const noop = () => {};
 
 export type MultiWatching = ReturnType<MultiCompiler['watch']>;
 
-// TODO: refine types to match underlying fs-like implementations
-export type OutputFileSystem = {
+export type OutputFileSystem = Rspack.OutputFileSystem & {
+  // TODO: can be removed after Rspack adding this type
   createReadStream?: (
     p: string,
     opts: { start: number; end: number },
   ) => ReadStream;
-  statSync?: (p: string) => FSStats;
-  readFileSync?: (p: string) => Buffer;
 };
 
 export type Options = {

packages/core/src/server/assets-middleware/middleware.ts

@@ -325,7 +325,11 @@ export function createMiddleware(
         return;
       }
 
-      const resolved = getFileFromUrl(req.url, outputFileSystem, environments);
+      const resolved = await getFileFromUrl(
+        req.url,
+        outputFileSystem,
+        environments,
+      );
 
       if (!resolved) {
         await goNext();

packages/core/src/server/browserLogs.ts

@@ -59,7 +59,7 @@ const resolveSourceLocation = async (
   }
 
   const { file, column, lineNumber } = frame;
-  const sourceMapInfo = getFileFromUrl(
+  const sourceMapInfo = await getFileFromUrl(
     `${file}.map`,
     fs as OutputFileSystem,
     environments,