fix: lazy compilation request handler should filter lazy-compilation …

…request (#9166)

* fix: support custom server

* docs: add docs

* chore: make docs easier to read

packages/rspack/etc/core.api.md

@@ -7,6 +7,7 @@
 /// <reference types="node" />
 
 import type { Abortable } from 'node:events';
+import type { AddressInfo } from 'node:net';
 import { AsyncParallelHook } from '@rspack/lite-tapable';
 import { AsyncSeriesBailHook } from '@rspack/lite-tapable';
 import * as binding from '@rspack/binding';
@@ -75,9 +76,9 @@ import { RawRuntimeChunkOptions } from '@rspack/binding';
 import { Resolver as Resolver_2 } from './Resolver';
 import { RspackOptionsNormalized as RspackOptionsNormalized_2 } from '.';
 import type { SecureContextOptions } from 'node:tls';
-import type { Server } from 'node:net';
 import type { ServerOptions } from 'node:http';
 import type { ServerResponse } from 'node:http';
+import type { Socket } from 'node:net';
 import { RawSourceMapDevToolPluginOptions as SourceMapDevToolPluginOptions } from '@rspack/binding';
 import sources = require('../compiled/webpack-sources');
 import { SyncBailHook } from '@rspack/lite-tapable';
@@ -10096,6 +10097,24 @@ type SafeParseSuccess<Output> = {
 // @public (undocumented)
 export type ScriptType = false | "text/javascript" | "module";
 
+// @public (undocumented)
+interface Server {
+    // (undocumented)
+    address(): AddressInfo;
+    // (undocumented)
+    close(callback: (err?: any) => void): void;
+    // (undocumented)
+    listen(listenOptions?: number | ListenOptions): void;
+    // (undocumented)
+    off(event: "request", callback: (req: IncomingMessage, res: ServerResponse) => void): void;
+    // (undocumented)
+    on(event: "request", callback: (req: IncomingMessage, res: ServerResponse) => void): void;
+    // (undocumented)
+    on(event: "connection", callback: (socket: Socket) => void): void;
+    // (undocumented)
+    on(event: "listening", callback: (err?: Error) => void): void;
+}
+
 // @public (undocumented)
 type ServerOptionsHttps<Request extends typeof IncomingMessage = typeof IncomingMessage, Response extends typeof ServerResponse = typeof ServerResponse> = SecureContextOptions & TlsOptions & ServerOptions<Request, Response>;
 

packages/rspack/src/builtin-plugin/lazy-compilation/backend.ts

@@ -2,17 +2,34 @@
  * MIT License http://www.opensource.org/licenses/mit-license.php
  * Author Tobias Koppers @sokra
  */
-
 import type {
 	IncomingMessage,
 	ServerOptions as ServerOptionsImport,
 	ServerResponse
 } from "node:http";
-import type { AddressInfo, ListenOptions, Server, Socket } from "node:net";
+import type { AddressInfo, ListenOptions, Socket } from "node:net";
 import type { SecureContextOptions, TlsOptions } from "node:tls";
 
 import type { Compiler } from "../..";
 
+interface Server {
+	on(
+		event: "request",
+		callback: (req: IncomingMessage, res: ServerResponse) => void
+	): void;
+	on(event: "connection", callback: (socket: Socket) => void): void;
+	on(event: "listening", callback: (err?: Error) => void): void;
+
+	off(
+		event: "request",
+		callback: (req: IncomingMessage, res: ServerResponse) => void
+	): void;
+
+	address(): AddressInfo;
+	close(callback: (err?: any) => void): void;
+	listen(listenOptions?: number | ListenOptions): void;
+}
+
 export interface LazyCompilationDefaultBackendOptions {
 	/**
 	 * A custom client script path.
@@ -82,16 +99,22 @@ const getBackend =
 		const listen =
 			typeof options.listen === "function"
 				? options.listen
-				: (server: Server) => {
-						let listen = options.listen;
-						if (typeof listen === "object" && !("port" in listen))
-							listen = { ...listen, port: undefined };
-						server.listen(listen);
-					};
+				: typeof options.server === "function" && !options.listen
+					? // if user offers custom server, no need to listen
+						() => {}
+					: (server: Server) => {
+							let { listen } = options;
+							if (typeof listen === "object" && !("port" in listen))
+								listen = { ...listen, port: undefined };
+							server.listen(listen as ListenOptions);
+						};
 
 		const protocol = options.protocol || (isHttps ? "https" : "http");
 
-		const requestListener = (req: any, res: ServerResponse) => {
+		const requestListener = (req: IncomingMessage, res: ServerResponse) => {
+			if (!req.url?.startsWith(prefix)) {
+				return;
+			}
 			const keys = req.url.slice(prefix.length).split("@");
 			req.socket.on("close", () => {
 				setTimeout(() => {
@@ -143,9 +166,6 @@ const getBackend =
 			});
 			if (isClosing) socket.destroy();
 		});
-		server.on("clientError", e => {
-			if (e.message !== "Server is disposing") logger.warn(e);
-		});
 		server.on("listening", (err: any) => {
 			if (err) return callback(err);
 			const addr = server.address() as AddressInfo;

tests/e2e/cases/css/css-filename/index.test.ts

@@ -3,7 +3,6 @@ import { test, expect } from "@/fixtures";
 test("should update css with filename", async ({
 	page,
 	fileAction,
-	rspack
 }) => {
 	await expect(page.locator("body")).toHaveCSS("color", "rgb(255, 0, 0)");
 	fileAction.updateFile("src/index.css", content =>

website/docs/en/config/experiments.mdx

@@ -111,27 +111,7 @@ export default {
 type LazyCompilationOptions =
   | boolean
   | {
-      backend?: {
-        /**
-         * A custom client script path.
-         */
-        client?: string;
-        /**
-         * Specifies where to listen to from the server.
-         */
-        listen?: number | ListenOptions | ((server: Server) => void);
-        /**
-         * Specifies the protocol the client should use to connect to the server.
-         */
-        protocol?: 'http' | 'https';
-        /**
-         * Specifies how to create the server handling the EventSource requests.
-         */
-        server?:
-          | ServerOptionsImport<typeof IncomingMessage>
-          | ServerOptionsHttps<typeof IncomingMessage, typeof ServerResponse>
-          | (() => Server);
-      };
+      backend?: LazyCompilationBackendOptions;
       /**
        * Enable lazy compilation for entries.
        */
@@ -168,9 +148,95 @@ In addition, you can also configure a `test` parameter for more fine-grained con
 The current lazy compilation aligns with the webpack implementation, **and is still in the experimental stage**. In some scenarios, lazy compilation might not work as expected, or the performance improvement may be insignificant.
 :::
 
+## experiments.lazyCompilation.backend
+
+- **Type:** `LazyCompilationBackendOptions`
+
+```ts
+type LazyCompilationBackendOptions = {
+  /**
+   * Custom client script path.
+   */
+  client?: string;
+  /**
+   * Specify the port or options to listen from the server.
+   */
+  listen?: number | ListenOptions | ((server: Server) => void);
+  /**
+   * Specify the protocol used by the client.
+   */
+  protocol?: 'http' | 'https';
+  /**
+   * Specify how to create a server that handles EventSource requests.
+   */
+  server?:
+    | ServerOptionsImport<typeof IncomingMessage>
+    | ServerOptionsHttps<typeof IncomingMessage, typeof ServerResponse>
+    | (() => Server);
+};
+```
+
+Enabling lazy compilation will start a separate server to handle requests from clients. You can customize the behavior of the server by configuring `lazyCompilation.backend`, and you can also provide your own server instance.
+
+### lazyCompilation.backend.server
+
+- **Type:**
+
+```ts
+type ServerOptions =
+  | ServerOptionsImport<typeof IncomingMessage>
+  | ServerOptionsHttps<typeof IncomingMessage, typeof ServerResponse>
+  | (() => Server);
+```
+
+```js title="rspack.config.js"
+module.exports = {
+  experiments: {
+    lazyCompilation: {
+      backend: {
+        server() {
+          return yourServer;
+        },
+      },
+    },
+  },
+};
+```
+
+You can provide a custom server instance to handle requests from clients for `lazy-compilation`. The provided server must meet the following interface requirements.
+
+```ts
+import type { IncomingMessage, ServerResponse } from 'node:http';
+import type { AddressInfo, ListenOptions, Socket } from 'node:net';
+
+interface Server {
+  // Register callback function to handle requests
+  on(
+    event: 'request',
+    callback: (req: IncomingMessage, res: ServerResponse) => void,
+  ): void;
+
+  // Register callback function for new client connections
+  on(event: 'connection', callback: (socket: Socket) => void): void;
+
+  // Register callback function for new client connections
+  on(event: 'listening', callback: (err?: Error) => void): void;
+
+  // Unregister registered callbacks
+  off(event: string, callback: () => void): void;
+
+  // Show address information of the server
+  address(): AddressInfo;
+
+  close(callback: (err?: any) => void): void;
+
+  listen(listenOption: number | ListenOption): void;
+}
+```
+
 ### lazyCompilation.backend.listen
 
-- **Type:** `number | ListenOptions`
+- **Type:** `number | ListenOptions | ((server: Server) => void)`
 
 ```ts
 type ListenOptions = {
@@ -179,15 +245,16 @@ type ListenOptions = {
   backlog?: number | undefined;
   path?: string | undefined;
   exclusive?: boolean | undefined;
-  readableAll?: boolean | undefined;
-  writableAll?: boolean | undefined;
-  /**
-   * @default false
-   */
-  ipv6Only?: boolean | undefined;
+  readableAll?: boolean | null;
+  writableAll?: boolean | null;
+  ip6Only?: boolean | null;
 };
 ```
 
+Specify how the sever listens ,you can pass in object form listening configuration,such as specifying listening ports,you can also pass in functions control how listen is done.
+
+When providing a custom server instance, you are responsible for calling the server's `listen` method to start the service, unless you explicitly configure a function forms` listen` option.
+
 ### Exclude HMR client
 
 If you do not use Rspack's own dev server and instead use your own server as the dev server, you generally need to add another client modules in the entry configuration to enable capabilities such as HMR. It is best to exclude these client module from lazy compilation by configuring `test`.