feat: 使用环境变量UMI_DEV_SERVER_COMPRESS来控制dev server是否进行压缩 (#12166)

* feat: 使用环境变量UMI_DEV_SERVER_COMPRESS来控制dev server是否进行压缩
* feat: 使用环境变量UMI_DEV_SERVER_COMPRESS来控制dev server是否进行压缩

* example: update

* docs: `UMI_DEV_SERVER_COMPRESS`

* example: update

* docs: comment

---------

Co-authored-by: 王凯斌 <[email protected]>
Co-authored-by: fz6m <[email protected]>

docs/docs/docs/guides/env-variables.md

@@ -198,6 +198,14 @@ $ UMI_PLUGINS=./path/to/plugin1,./path/to/plugin2  umi dev
 $ UMI_PRESETS=./path/to/preset1,./path/to/preset2  umi dev
 ```
 
+### UMI_DEV_SERVER_COMPRESS
+
+默认 Umi 开发服务器自带 [compress](https://github.com/expressjs/compression) 压缩中间件，这会使开发时 SSE 数据的传输 [无法流式获取](https://github.com/umijs/umi/issues/12144) ，通过指定 `UMI_DEV_SERVER_COMPRESS=none` 来关闭 compress 压缩功能：
+
+```bash
+  UMI_DEV_SERVER_COMPRESS=none umi dev
+```
+
 ### WEBPACK_FS_CACHE_DEBUG
 
 开启 webpack 的物理缓存 debug 日志。

examples/with-no-compress-for-sse/.umirc.ts

@@ -0,0 +1 @@
+export default {};

examples/with-no-compress-for-sse/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@example/with-no-compress-for-sse",
+  "private": true,
+  "scripts": {
+    "build": "umi build",
+    "dev": "umi dev",
+    "dev:nocompress": "cross-env UMI_DEV_SERVER_COMPRESS=none npm run dev"
+  },
+  "dependencies": {
+    "umi": "workspace:*"
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.3"
+  }
+}

examples/with-no-compress-for-sse/pages/index.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+
+class Event {
+  data: string;
+  timeString: string;
+
+  constructor(data: string) {
+    this.data = data;
+    this.timeString = new Date().toLocaleTimeString();
+  }
+}
+
+export default function HomePage() {
+  const [events, setEvents] = useState<Event[]>([]);
+
+  useEffect(() => {
+    console.log('开始请求');
+    const eventSource = new EventSource('/events/number');
+    let startEvent = new Event('开始请求');
+    setEvents((prev) => [...prev, startEvent]);
+    eventSource.onmessage = function (e: any) {
+      let item = new Event(e.data);
+      setEvents((prev) => [...prev, item]);
+    };
+    eventSource.onerror = (e) => {
+      console.log('EventSource failed:', e);
+      eventSource.close();
+    };
+  }, []);
+
+  return (
+    <div>
+      <h3>{`演示：当默认存在 compress 时，数据无法流式获取。`}</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>事件内容</th>
+            <th>接收时间</th>
+          </tr>
+        </thead>
+        <tbody>
+          {events.map((event, index) => (
+            <tr key={index}>
+              <td>{event.data}</td>
+              <td>{event.timeString}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

examples/with-no-compress-for-sse/plugin.ts

@@ -0,0 +1,8 @@
+import { IApi } from 'umi';
+import { sseMiddleware } from './sse-middleware';
+
+export default (api: IApi) => {
+  api.onBeforeMiddleware(({ app }) => {
+    sseMiddleware(app);
+  });
+};

examples/with-no-compress-for-sse/readme.md

@@ -0,0 +1,9 @@
+# with-no-compress-for-sse
+
+### 背景
+
+[来源](https://github.com/umijs/umi/issues/12144)，在开发环境下由于 umi dev server 内置了 `compress` 中间件，导致 SSE 流在开发时传递不符合预期。
+
+### 解决
+
+本示例演示了此问题，并通过启动时附加 `UMI_DEV_SERVER_COMPRESS=none` 来关闭 `compress` 中间件，使 SSE 在本地开发时正常运作。

examples/with-no-compress-for-sse/sse-middleware.ts

@@ -0,0 +1,29 @@
+import type { Express } from '@umijs/bundler-utils/compiled/express';
+
+export const sseMiddleware = (app: Express) => {
+  app.get('/events/number', (req, res) => {
+    console.log('new connection');
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+    });
+
+    let counter = 1;
+    const intervalId = setInterval(() => {
+      if (counter === 5) {
+        clearInterval(intervalId);
+        res.end(`data: 事件${counter}\n\n`);
+        return;
+      }
+      res.write(`data: 事件${counter}\n\n`);
+
+      counter++;
+    }, 1000);
+
+    req.on('close', () => {
+      clearInterval(intervalId);
+      res.end();
+    });
+  });
+};

packages/bundler-webpack/src/server/server.ts

@@ -44,8 +44,10 @@ export async function createServer(opts: IOpts): Promise<any> {
     }),
   );
 
-  // compression
-  app.use(require('@umijs/bundler-webpack/compiled/compression')());
+  // See https://github.com/umijs/umi/issues/12144
+  if (process.env.UMI_DEV_SERVER_COMPRESS !== 'none') {
+    app.use(require('@umijs/bundler-webpack/compiled/compression')());
+  }
 
   // debug all js file
   app.use((req, res, next) => {