feat(dev-server): enable gzip compression, add devServer.compress config (#3723)

* feat(dev-server): enable gzip compression, add devServer.compress config

* chore: update

* chore: update lock file

* chore: use http-compression to replace compression

* chore: fix typing

Author: chenjiahan

.changeset/lovely-jars-roll.md

@@ -0,0 +1,10 @@
+---
+'@modern-js/builder-shared': patch
+'@modern-js/builder-doc': patch
+'@modern-js/server': patch
+'@modern-js/types': patch
+---
+
+feat(dev-server): enable gzip compression, add devServer.compress config
+
+feat(dev-server): 默认启用 gzip 压缩，新增 devServer.compress 配置项

packages/builder/builder-shared/src/schema/tools.ts

@@ -23,6 +23,7 @@ const sharedDevServerConfigSchema = z.partialObj({
     ]),
   }),
   historyApiFallback: z.union([z.boolean(), z.record(z.unknown())]),
+  compress: z.boolean(),
   hot: z.boolean(),
   https: DevServerHttpsOptionsSchema,
   liveReload: z.boolean(),

packages/document/builder-doc/docs/en/config/tools/devServer.md

@@ -103,6 +103,25 @@ const defaultConfig = {
 
 The config of HMR client, which are usually used to set the WebSocket URL of HMR.
 
+#### compress
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+Whether to enable gzip compression for served static resources.
+
+If you want to disable the gzip compression, you can set `compress` to `false`:
+
+```ts
+export default {
+  tools: {
+    devServer: {
+      compress: false,
+    },
+  },
+};
+```
+
 #### devMiddleware
 
 - **Type:**

packages/document/builder-doc/docs/zh/config/tools/devServer.md

@@ -103,6 +103,25 @@ const defaultConfig = {
 
 对应 HMR 客户端的配置，通常用于设置 HMR 对应的 WebSocket URL。
 
+#### compress
+
+- **类型：** `boolean`
+- **默认值：** `true`
+
+是否对静态资源启用 gzip 压缩。
+
+如果你需要禁用 gzip 压缩，可以将 `compress` 设置为 `false`：
+
+```ts
+export default {
+  tools: {
+    devServer: {
+      compress: false,
+    },
+  },
+};
+```
+
 #### devMiddleware
 
 - **类型：**

packages/server/server/package.json

@@ -52,11 +52,12 @@
     "@modern-js/server-utils": "workspace:*",
     "@modern-js/types": "workspace:*",
     "@modern-js/utils": "workspace:*",
+    "@swc/helpers": "0.5.1",
     "connect-history-api-fallback": "^2.0.0",
+    "http-compression": "1.0.6",
     "minimatch": "^3.0.4",
     "path-to-regexp": "^6.2.0",
-    "ws": "^8.2.0",
-    "@swc/helpers": "0.5.1"
+    "ws": "^8.2.0"
   },
   "devDependencies": {
     "@modern-js/server-core": "workspace:*",

packages/server/server/src/constants.ts

@@ -16,6 +16,7 @@ export const getDefaultDevOptions = (): DevServerOptions => {
     devMiddleware: { writeToDisk: true },
     watch: true,
     hot: true,
+    compress: true,
     liveReload: true,
   };
 };

packages/server/server/src/server/devServer.ts

@@ -130,6 +130,19 @@ export class ModernDevServer extends ModernServer {
   private async applyDefaultMiddlewares(app: Server) {
     const { pwd, dev, devMiddleware } = this;
 
+    // compression should be the first middleware
+    if (dev.compress) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error http-compression does not provide a type definition
+      const { default: compression } = await import('http-compression');
+      this.addHandler((ctx, next) => {
+        compression({
+          gzip: true,
+          brotli: false,
+        })(ctx.req, ctx.res, next);
+      });
+    }
+
     this.addHandler((ctx: ModernServerContext, next: NextFunction) => {
       // allow hmr request cross-domain, because the user may use global proxy
       ctx.res.setHeader('Access-Control-Allow-Origin', '*');

packages/toolkit/types/server/devServer.d.ts

@@ -24,6 +24,8 @@ export type DevServerOptions = {
     host?: string;
     protocol?: string;
   };
+  /** Whether to enable gzip compression */
+  compress?: boolean;
   devMiddleware?: {
     writeToDisk?: boolean | ((filename: string) => boolean);
     outputFileSystem?: Record<string, any>;