refactor: lazy run dev middleware

Author: alexander-akait

lib/Server.js

@@ -201,7 +201,11 @@ const schema = require("./options.json");
  */
 
 /**
- * @typedef {{ name?: string, path?: string, middleware: MiddlewareHandler } | MiddlewareHandler } Middleware
+ * @typedef {{ name?: string, path?: string, middleware: MiddlewareHandler }} MiddlewareObject
+ */
+
+/**
+ * @typedef {MiddlewareObject | MiddlewareHandler } Middleware
  */
 
 /** @typedef {import("net").Server | import("tls").Server} BasicServer */
@@ -1228,7 +1232,6 @@ class Server {
         if (!certificateExists) {
           this.logger.info("Generating SSL certificate...");
 
-          // @ts-ignore
           const selfsigned = require("selfsigned");
           const attributes = [{ name: "commonName", value: "localhost" }];
           const pems = selfsigned.generate(attributes, {
@@ -1987,18 +1990,9 @@ class Server {
       });
     }
 
-    const webpackDevMiddleware = require("webpack-dev-middleware");
-
-    // middleware for serving webpack bundle
-    /** @type {import("webpack-dev-middleware").Middleware<Request, Response>}*/
-    const devMiddleware = webpackDevMiddleware(
-      this.compiler,
-      this.options.devMiddleware,
-    );
-
     middlewares.push({
       name: "webpack-dev-middleware",
-      middleware: devMiddleware,
+      middleware: /** @type {MiddlewareHandler} */ (this.middleware),
     });
 
     // Should be after `webpack-dev-middleware`, otherwise other middlewares might rewrite response
@@ -2024,9 +2018,7 @@ class Server {
         );
 
         // Express send Etag and other headers by default, so let's keep them for compatibility reasons
-        // @ts-ignore
         if (typeof res.sendFile === "function") {
-          // @ts-ignore
           res.sendFile(clientPath);
           return;
         }
@@ -2328,6 +2320,7 @@ class Server {
           name: "http-proxy-middleware",
           middleware: handler,
         });
+
         // Also forward error requests to the proxy so it can handle them.
         middlewares.push({
           name: "http-proxy-middleware-error-handler",
@@ -2345,7 +2338,7 @@ class Server {
 
       middlewares.push({
         name: "webpack-dev-middleware",
-        middleware: devMiddleware,
+        middleware: /** @type {MiddlewareHandler} */ (this.middleware),
       });
     }
 
@@ -2402,7 +2395,7 @@ class Server {
       // it is able to handle '/index.html' request after redirect
       middlewares.push({
         name: "webpack-dev-middleware",
-        middleware: devMiddleware,
+        middleware: /** @type {MiddlewareHandler} */ (this.middleware),
       });
 
       if (staticOptions.length > 0) {
@@ -2479,16 +2472,31 @@ class Server {
       middlewares = this.options.setupMiddlewares(middlewares, this);
     }
 
-    const foundDevMiddleware = middlewares.find(
-      (item) => item.name === "webpack-dev-middleware",
-    );
+    // Lazy init webpack dev middleware
+    const lazyInitDevMiddleware = () => {
+      if (!this.middleware) {
+        const webpackDevMiddleware = require("webpack-dev-middleware");
+
+        // middleware for serving webpack bundle
+        /** @type {import("webpack-dev-middleware").API<Request, Response>} */
+        this.middleware = webpackDevMiddleware(
+          this.compiler,
+          this.options.devMiddleware,
+        );
+      }
+
+      return this.middleware;
+    };
+
+    for (const i of middlewares) {
+      if (i.name === "webpack-dev-middleware") {
+        const item = /** @type {MiddlewareObject} */ (i);
 
-    // TODO make it lazy
-    /** @type {import("webpack-dev-middleware").API<Request, Response> | undefined} */
-    this.middleware = foundDevMiddleware
-      ? /** @type {any} */ (foundDevMiddleware).middleware
-      : // eslint-disable-next-line no-undefined
-        undefined;
+        if (typeof item.middleware === "undefined") {
+          item.middleware = lazyInitDevMiddleware();
+        }
+      }
+    }
 
     for (const middleware of middlewares) {
       if (typeof middleware === "function") {
@@ -2761,14 +2769,11 @@ class Server {
      */
     this.bonjour = new Bonjour();
     this.bonjour.publish({
-      // @ts-expect-error
       name: `Webpack Dev Server ${os.hostname()}:${this.options.port}`,
-      // @ts-expect-error
       port: /** @type {number} */ (this.options.port),
-      // @ts-expect-error
       type,
       subtypes: ["webpack"],
-      .../** @type {BonjourOptions} */ (this.options.bonjour),
+      .../** @type {Partial<BonjourOptions>} */ (this.options.bonjour),
     });
   }
 

types/lib/Server.d.ts

@@ -1278,9 +1278,18 @@ declare class Server<
    * @returns {void}
    */
   private setupMiddlewares;
-  /** @type {import("webpack-dev-middleware").API<Request, Response> | undefined} */
+  /** @type {import("webpack-dev-middleware").API<Request, Response>} */
   middleware:
-    | import("webpack-dev-middleware").API<Request, Response>
+    | import("webpack-dev-middleware").API<
+        import("express").Request<
+          import("express-serve-static-core").ParamsDictionary,
+          any,
+          any,
+          qs.ParsedQs,
+          Record<string, any>
+        >,
+        import("express").Response<any, Record<string, any>>
+      >
     | undefined;
   /**
    * @private
@@ -1453,6 +1462,7 @@ declare namespace Server {
     ClientConfiguration,
     Headers,
     MiddlewareHandler,
+    MiddlewareObject,
     Middleware,
     BasicServer,
     Configuration,
@@ -1681,13 +1691,12 @@ type MiddlewareHandler<
 > = T extends ExpressApplication
   ? ExpressRequestHandler | ExpressErrorRequestHandler
   : HandleFunction;
-type Middleware =
-  | {
-      name?: string;
-      path?: string;
-      middleware: MiddlewareHandler;
-    }
-  | MiddlewareHandler;
+type MiddlewareObject = {
+  name?: string;
+  path?: string;
+  middleware: MiddlewareHandler;
+};
+type Middleware = MiddlewareObject | MiddlewareHandler;
 type BasicServer = import("net").Server | import("tls").Server;
 type Configuration<
   A extends BasicApplication = import("express").Application,