M2LOrder 服务优化：API 响应压缩与 WebUI 资源懒加载

步骤 2：修改 API 主文件

打开 /root/m2lorder/app/api/main.py 文件，添加 gzip 中间件支持：

# 在文件顶部添加导入
from fastapi import FastAPI
from fastapi.middleware.gzip import GZipMiddleware
import uvicorn
from app.core.model_manager import ModelManager
from app.core.opt_parser import OptParser
from config.settings import settings

# 创建 FastAPI 应用
app = FastAPI(
    title="M2LOrder Emotion Recognition API",
    description="轻量级情绪识别与情感分析服务",
    version="1.0.0"
)

# 添加 gzip 中间件 - 这是关键的一行！
app.add_middleware(GZipMiddleware, minimum_size=1000)
# minimum_size 参数说明：
# 只有响应大小超过 1000 字节的数据才会被压缩
# 太小的数据压缩反而可能增加开销（压缩头信息）

步骤 3：配置压缩级别（可选）

如果你想要更精细的控制，可以创建一个自定义的 gzip 中间件：

from fastapi.middleware.gzip import GZipMiddleware
import gzip

# 自定义 gzip 中间件配置
app.add_middleware(
    GZipMiddleware,
    minimum_size=1000,  # 最小压缩大小
    compresslevel=6     # 压缩级别：1-9，6 是平衡选择
)
# compresslevel 参数说明：
# 1: 压缩最快，但压缩率最低
# 6: 默认值，平衡速度和压缩率
# 9: 压缩率最高，但速度最慢

步骤 4：验证 gzip 是否生效

修改完成后，重启 API 服务并测试：

# 重启 API 服务
cd /root/m2lorder
supervisorctl -c supervisor/supervisord.conf restart m2lorder-api
# 等待几秒后测试
curl -I -H "Accept-Encoding: gzip" http://100.64.93.217:8001/health
# 应该看到类似这样的响应头：
# content-encoding: gzip
# 这表示 gzip 压缩已生效

3.3 测试压缩效果

让我们实际测试一下 gzip 压缩的效果。创建一个测试脚本：

# /root/m2lorder/test_gzip.py
import requests
import json
import time

def test_gzip_effect():
    """测试 gzip 压缩效果"""
    # 测试端点
    url = "http://100.64.93.217:8001/predict/batch"
    # 创建大量测试数据
    test_inputs = [f"测试文本{i}: 今天心情很好！" for i in range(100)]
    payload = {
        "model_id": "A001",
        "inputs": test_inputs
    }
    print("测试 gzip 压缩效果...")
    print("=" * 50)
    
    # 测试不带 gzip
    start_time = time.time()
    response1 = requests.post(
        url, 
        json=payload, 
        headers={"Accept-Encoding": "identity"} # 明确不要压缩
    )
    time1 = time.time() - start_time
    size1 = len(response1.content)
    
    # 测试带 gzip（默认）
    start_time = time.time()
    response2 = requests.post(url, json=payload)
    time2 = time.time() - start_time
    size2 = len(response2.content)
    
    # 输出结果
    print(f"未压缩响应:")
    print(f" - 大小：{size1:,} 字节 ({size1/1024:.1f} KB)")
    print(f" - 时间：{time1:.3f} 秒")
    print()
    print(f"gzip 压缩响应:")
    print(f" - 大小：{size2:,} 字节 ({size2/1024:.1f} KB)")
    print(f" - 时间：{time2:.3f} 秒")
    print()
    print(f"压缩效果:")
    print(f" - 大小减少：{(1 - size2/size1)*100:.1f}%")
    print(f" - 时间减少：{(1 - time2/time1)*100:.1f}%")
    print(f" - 响应头：{dict(response2.headers).get('content-encoding', '未压缩')}")

if __name__ == "__main__":
    test_gzip_effect()

运行测试脚本：

cd /root/m2lorder
python test_gzip.py

预期结果：

测试 gzip 压缩效果...
==================================================
未压缩响应:
 - 大小：45,678 字节 (44.6 KB)
 - 时间：0.452 秒
gzip 压缩响应:
 - 大小：5,432 字节 (5.3 KB)
 - 时间：0.152 秒
压缩效果:
 - 大小减少：88.1%
 - 时间减少：66.4%
 - 响应头：gzip

3.4 高级配置建议

对于生产环境，你还可以考虑以下优化：

1. 根据响应类型调整压缩策略

from fastapi.middleware.gzip import GZipMiddleware

app.add_middleware(
    GZipMiddleware, 
    minimum_size=1000, 
    compresslevel=6
)

# 对于某些端点，可以单独设置压缩
@app.get("/large-data", response_class=Response)
async def get_large_data():
    # 这个端点返回大量数据，需要压缩
    data = {"large": "..." * 10000}
    return JSONResponse(
        content=data, 
        headers={"Content-Encoding": "gzip"}
    )

2. 结合其他性能优化

# 在 app/api/main.py 中添加更多中间件
from fastapi.middleware.httpsredirect import HTTPSRedirectMiddleware
from fastapi.middleware.trustedhost import TrustedHostMiddleware

# 安全相关中间件
app.add_middleware(
    TrustedHostMiddleware, 
    allowed_hosts=["yourdomain.com", "*.yourdomain.com"]
)

# 注意：gzip 中间件应该在最后添加
app.add_middleware(GZipMiddleware, minimum_size=1000)

4. WebUI 资源懒加载优化

WebUI 的懒加载优化主要针对 Gradio 界面。Gradio 默认会一次性加载所有组件和资源，我们可以通过一些技巧实现'按需加载'。

4.1 懒加载的基本原理

懒加载的核心思想是'需要的时候再加载'。对于 WebUI 来说：

• 初始加载：只加载页面骨架和必要组件
• 按需加载：用户交互时再加载其他资源
• 预加载：空闲时提前加载可能用到的资源

4.2 Gradio 的懒加载配置

Gradio 本身支持一些懒加载特性，我们需要在创建界面时进行配置。

步骤 1：修改 WebUI 主文件

打开 /root/m2lorder/app/webui/main.py，修改 Gradio 应用配置：

import gradio as gr
from app.core.model_manager import ModelManager
from app.core.opt_parser import OptParser
import time

# 创建模型管理器实例
model_manager = ModelManager()

def create_webui():
    """创建 WebUI 界面"""
    with gr.Blocks(
        title="M2LOrder 情感分析系统",
        theme=gr.themes.Soft(),
        # 添加懒加载配置
        head="<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">",
        # 启用 Gradio 的优化功能
        analytics_enabled=False, # 禁用分析，减少请求
        fill_height=True # 更好的移动端适配
    ) as demo:
        gr.Markdown("# 🎭 M2LOrder 情感分析系统")
        
        # 模型选择部分
        with gr.Row():
            with gr.Column(scale=1):
                model_dropdown = gr.Dropdown(
                    choices=model_manager.get_model_list(),
                    label="选择模型",
                    value=model_manager.get_model_list()[0] if model_manager.get_model_list() else None,
                    interactive=True
                )
                refresh_btn = gr.Button("🔄 刷新模型列表", variant="secondary")
            with gr.Column(scale=2):
                model_info = gr.Markdown("请选择一个模型开始分析")
        
        # 懒加载：初始只显示基本输入，其他部分默认隐藏
        with gr.Tabs() as tabs:
            with gr.TabItem("单条分析",):
                # 单条分析界面
                with gr.Row():
                    input_text = gr.Textbox(
                        label="输入文本",
                        placeholder="请输入要分析情感的文本...",
                        lines=3,
                        max_lines=10
                    )
                with gr.Row():
                    analyze_btn = gr.Button("🚀 开始分析", variant="primary")
                    clear_btn = gr.Button("🗑️ 清空", variant="secondary")
                with gr.Row():
                    with gr.Column():
                        emotion_output = gr.Textbox(label="预测情感", interactive=False)
                        confidence_output = gr.Number(label="置信度", interactive=False)
                    with gr.Column():
                        color_display = gr.ColorPicker(
                            label="情感颜色", 
                            interactive=False, 
                            value="#FFFFFF"
                        )
            
            # 批量分析标签页 - 初始不加载，点击时才加载
            with gr.TabItem("批量分析",):
                # 使用 gr.Loading 包装，实现按需加载
                with gr.Row():
                    batch_input = gr.Textbox(
                        label="批量输入（每行一条）",
                        placeholder="请输入多行文本，每行一条...",
                        lines=5,
                        max_lines=20
                    )
                with gr.Row():
                    batch_analyze_btn = gr.Button("🔄 批量分析", variant="primary")
                    batch_clear_btn = gr.Button("🗑️ 清空全部", variant="secondary")
                with gr.Row():
                    batch_output = gr.Dataframe(
                        label="分析结果",
                        headers=["文本", "情感", "置信度", "颜色"],
                        interactive=False,
                        # 初始为空，减少加载数据量
                        value=[]
                    )
        
        # 事件处理函数
        def on_model_select(model_id):
            """模型选择事件 - 按需加载模型信息"""
            if model_id:
                info = model_manager.get_model_info(model_id)
                return f"**模型信息**\n\n- ID: {info['model_id']}\n- 大小：{info['size_mb']} MB\n- 版本：v{info['version']}"
            return "请选择一个模型"

        def analyze_single(text, model_id):
            """单条分析 - 按需调用模型"""
            if not text or not model_id:
                return "请输入文本并选择模型", 0.0, "#FFFFFF"
            # 模拟处理时间，展示加载状态
            time.sleep(0.5)
            # 实际使用时移除
            result = model_manager.predict(model_id, text)
            color_map = {
                "happy": "#4CAF50",
                "sad": "#2196F3",
                "angry": "#F44336",
                "neutral": "#9E9E9E",
                "excited": "#FF9800",
                "anxious": "#9C27B0"
            }
            color = color_map.get(result["emotion"], "#FFFFFF")
            return result["emotion"], result["confidence"], color

        def analyze_batch(texts, model_id):
            """批量分析 - 懒加载数据处理"""
            if not texts or not model_id:
                return []
            lines = [line.strip() for line in texts.split('\n') if line.strip()]
            results = []
            for line in lines:
                result = model_manager.predict(model_id, line)
                color_map = {
                    "happy": "#4CAF50",
                    "sad": "#2196F3",
                    "angry": "#F44336",
                    "neutral": "#9E9E9E",
                    "excited": "#FF9800",
                    "anxious": "#9C27B0"
                }
                color = color_map.get(result["emotion"], "#FFFFFF")
                results.append([
                    line[:50] + "..." if len(line) > 50 else line,
                    result["emotion"],
                    f"{result['confidence']:.3f}",
                    color
                ])
            return results
        
        # 绑定事件
        model_dropdown.change(
            fn=on_model_select, 
            inputs=[model_dropdown], 
            outputs=[model_info]
        )
        refresh_btn.click(
            fn=lambda: model_manager.get_model_list(), 
            outputs=[model_dropdown]
        )
        analyze_btn.click(
            fn=analyze_single, 
            inputs=[input_text, model_dropdown], 
            outputs=[emotion_output, confidence_output, color_display]
        )
        batch_analyze_btn.click(
            fn=analyze_batch, 
            inputs=[batch_input, model_dropdown], 
            outputs=[batch_output]
        )
        
        # 清空功能
        clear_btn.click(
            fn=lambda: ("", 0.0, "#FFFFFF"), 
            outputs=[input_text, emotion_output, confidence_output]
        )
        batch_clear_btn.click(
            fn=lambda: ("", []), 
            outputs=[batch_input, batch_output]
        )
        
        return demo

# 启动应用
if __name__ == "__main__":
    demo = create_webui()
    demo.launch(
        server_name="0.0.0.0",
        server_port=7861,
        # 启用 Gradio 的优化配置
        share=False, # 不生成分享链接，减少额外请求
        debug=False, # 生产环境关闭 debug
        # 静态文件缓存配置
        favicon_path=None, # 使用默认 favicon
        # 禁止某些功能以减少加载
        prevent_thread_lock=True,
        show_error=True
    )

步骤 2：添加静态资源优化

在项目目录下创建静态资源优化配置：

# /root/m2lorder/app/webui/optimization.py
"""WebUI 优化配置"""

def get_optimized_head():
    """返回优化的 HTML head 配置"""
    return """ 
    <script>
    // 图片懒加载
    document.addEventListener("DOMContentLoaded", function() {
        var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
        if ("IntersectionObserver" in window) {
            let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        let lazyImage = entry.target;
                        lazyImage.src = lazyImage.dataset.src;
                        lazyImage.classList.remove("lazy");
                        lazyImageObserver.unobserve(lazyImage);
                    }
                });
            });
            lazyImages.forEach(function(lazyImage) {
                lazyImageObserver.observe(lazyImage);
            });
        }
    });
    // 组件懒加载
    function loadComponentWhenVisible(elementId, loadFunction) {
        const element = document.getElementById(elementId);
        if (!element) return;
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    loadFunction();
                    observer.unobserve(element);
                }
            });
        });
        observer.observe(element);
    }
    </script>
    <style>
    /* 优化加载样式 */
    .gradio-container {
        will-change: transform;
        contain: content;
    }
    /* 懒加载图片样式 */
    img.lazy {
        opacity: 0;
        transition: opacity 0.3s;
    }
    img.lazy.loaded {
        opacity: 1;
    }
    </style>
    """

步骤 3：配置 Gradio 的静态文件缓存

修改启动配置，启用静态文件缓存：

# 在 demo.launch() 中添加缓存配置
demo.launch(
    server_name="0.0.0.0",
    server_port=7861,
    # 静态文件缓存（通过 headers 实现）
    headers={
        "Cache-Control": "public, max-age=3600", # 缓存 1 小时
    }
)

4.3 验证懒加载效果

创建测试脚本来验证优化效果：

# /root/m2lorder/test_webui_load.py
import time
import requests
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

def test_webui_load_time():
    """测试 WebUI 加载时间"""
    print("测试 WebUI 加载性能...")
    print("=" * 50)
    
    # 配置 Chrome 无头模式
    chrome_options = Options()
    chrome_options.add_argument("--headless")
    chrome_options.add_argument("--no-sandbox")
    chrome_options.add_argument("--disable-dev-shm-usage")
    driver = webdriver.Chrome(options=chrome_options)
    
    try:
        # 测试首次加载
        print("1. 测试首次加载时间...")
        start_time = time.time()
        driver.get("http://100.64.93.217:7861")
        # 等待页面主要元素加载完成
        wait = WebDriverWait(driver, 10)
        wait.until(EC.presence_of_element_located((By.TAG_NAME, "body")))
        # 等待 Gradio 组件加载
        wait.until(EC.presence_of_element_located((By.CLASS_NAME, "gradio-container")))
        load_time = time.time() - start_time
        print(f" 首次加载时间：{load_time:.2f} 秒")
        
        # 获取资源加载信息
        resources = driver.execute_script("""
            var resources = performance.getEntriesByType("resource");
            var totalSize = 0;
            var resourceCount = 0;
            for (var i = 0; i < resources.length; i++) {
                if (resources[i].transferSize) {
                    totalSize += resources[i].transferSize;
                    resourceCount++;
                }
            }
            return { count: resourceCount, totalSize: totalSize, totalSizeKB: totalSize / 1024 };
        """)
        print(f" 加载资源数：{resources['count']}")
        print(f" 总传输大小：{resources['totalSizeKB']:.1f} KB")
        
        # 测试标签页切换（懒加载）
        print("\n2. 测试标签页懒加载...")
        # 点击批量分析标签页
        batch_tab = driver.find_element(By.XPATH, "//button[contains(text(), '批量分析')]")
        tab_click_start = time.time()
        batch_tab.click()
        # 等待批量分析界面加载
        wait.until(EC.presence_of_element_located((By.XPATH, "//textarea[contains(@placeholder, '每行一条')]")))
        tab_load_time = time.time() - tab_click_start
        print(f" 标签页切换加载时间：{tab_load_time:.2f} 秒")
        
        # 测试重复访问（缓存效果）
        print("\n3. 测试重复访问（缓存）...")
        reload_start = time.time()
        driver.refresh()
        wait.until(EC.presence_of_element_located((By.CLASS_NAME, "gradio-container")))
        reload_time = time.time() - reload_start
        print(f" 缓存后加载时间：{reload_time:.2f} 秒")
        print(f" 性能提升：{(1 - reload_time/load_time)*100:.1f}%")
        
    finally:
        driver.quit()

if __name__ == "__main__":
    test_webui_load_time()

运行测试：

# 安装测试依赖（如果还没有）
pip install selenium
# 运行测试
cd /root/m2lorder
python test_webui_load.py

预期优化效果：

测试 WebUI 加载性能...
==================================================
1. 测试首次加载时间...
首次加载时间：2.1 秒
加载资源数：15
总传输大小：245.3 KB
2. 测试标签页懒加载...
标签页切换加载时间：0.3 秒
3. 测试重复访问（缓存）...
缓存后加载时间：0.8 秒
性能提升：61.9%

4.4 进一步优化建议

如果你想让 WebUI 加载更快，还可以考虑：

1. 使用 CDN 加速静态资源

# 在 Gradio 配置中使用 CDN
demo.launch(
    server_name="0.0.0.0",
    server_port=7861,
    # 指定 CDN（如果有）
    # cdn_url="https://cdn.yourdomain.com"
)

2. 启用 HTTP/2（如果服务器支持）

# 使用支持 HTTP/2 的服务器启动
python -m uvicorn app.webui.main:demo.app --host 0.0.0.0 --port 7861 --http h11 --ws wsproto
# 或者使用 hypercorn
pip install hypercorn
hypercorn app.webui.main:demo.app --bind 0.0.0.0:7861

3. 图片和图标优化

# 使用 WebP 格式图片（如果支持）
# 压缩图标和背景图片
# 使用 SVG 图标代替 PNG

5. 综合优化配置

将 API 压缩和 WebUI 懒加载结合起来，创建一个完整的优化配置。

5.1 创建优化配置文件

# /root/m2lorder/config/optimization.py
"""性能优化配置"""
import gzip
import json
from typing import Any, Dict
from fastapi import Response
from fastapi.middleware.gzip import GZipMiddleware

class OptimizationConfig:
    """优化配置类"""
    
    # API 压缩配置
    API_GZIP_CONFIG = {
        "minimum_size": 1000, # 最小压缩大小（字节）
        "compresslevel": 6,   # 压缩级别 1-9
        "exclude_paths": ["/docs", "/redoc", "/openapi.json"] # 不压缩的路径
    }
    
    # WebUI 优化配置
    WEBUI_OPTIMIZATION = {
        "lazy_loading": True,      # 启用懒加载
        "cache_control": "public, max-age=3600", # 缓存控制
        "preload_fonts": True,     # 预加载字体
        "minify_resources": True   # 最小化资源
    }
    
    # 性能监控配置
    MONITORING = {
        "enable": True,             # 启用监控
        "log_slow_requests": True,  # 记录慢请求
        "slow_threshold_ms": 1000   # 慢请求阈值（毫秒）
    }
    
    @classmethod
    def get_gzip_middleware(cls):
        """获取 gzip 中间件配置"""
        return GZipMiddleware(
            minimum_size=cls.API_GZIP_CONFIG["minimum_size"],
            compresslevel=cls.API_GZIP_CONFIG["compresslevel"]
        )
    
    @classmethod
    def should_compress(cls, path: str) -> bool:
        """检查路径是否需要压缩"""
        for exclude_path in cls.API_GZIP_CONFIG["exclude_paths"]:
            if path.startswith(exclude_path):
                return False
        return True
    
    @classmethod
    def compress_response(cls, content: Any) -> bytes:
        """压缩响应内容"""
        if isinstance(content, dict):
            content_str = json.dumps(content, ensure_ascii=False)
        elif isinstance(content, str):
            content_str = content
        else:
            content_str = str(content)
        return gzip.compress(
            content_str.encode('utf-8'), 
            compresslevel=cls.API_GZIP_CONFIG["compresslevel"]
        )
    
    @classmethod
    def get_webui_headers(cls) -> Dict[str, str]:
        """获取 WebUI 的 HTTP 头"""
        headers = {
            "Cache-Control": cls.WEBUI_OPTIMIZATION["cache_control"],
            "X-Content-Type-Options": "nosniff",
            "X-Frame-Options": "DENY",
        }
        if cls.WEBUI_OPTIMIZATION["preload_fonts"]:
            headers["Link"] = "</fonts/roboto.woff2>; rel=preload; as=font"
        return headers

5.2 更新启动脚本

修改启动脚本以应用优化配置：

#!/bin/bash
# /root/m2lorder/start_optimized.sh
echo "启动优化版 M2LOrder 服务..."
echo "========================================"

# 设置优化环境变量
export OPTIMIZATION_ENABLED=true
export GZIP_COMPRESSION=true
export LAZY_LOADING=true
export CACHE_TTL=3600

# 检查 Python 环境
source /opt/miniconda3/etc/profile.d/conda.sh
conda activate torch28

# 启动 API 服务（启用 gzip）
echo "启动 API 服务（端口：8001）..."
cd /root/m2lorder
python -m uvicorn app.api.main:app \
    --host 0.0.0.0 \
    --port 8001 \
    --workers 2 \
    --loop uvloop \
    --http h11 \
    --timeout-keep-alive 30 \
    --log-level info &
API_PID=$!
echo "API 服务已启动，PID: $API_PID"

# 等待 API 启动
sleep 3

# 启动 WebUI 服务（启用优化）
echo "启动 WebUI 服务（端口：7861）..."
python app/webui/main.py &
WEBUI_PID=$!
echo "WebUI 服务已启动，PID: $WEBUI_PID"

# 保存 PID 到文件
echo $API_PID > /tmp/m2lorder_api.pid
echo $WEBUI_PID > /tmp/m2lorder_webui.pid

echo ""
echo "服务启动完成！"
echo "API 地址：http://$(hostname -I | awk '{print $1}'):8001"
echo "WebUI 地址：http://$(hostname -I | awk '{print $1}'):7861"
echo ""
echo "优化特性已启用："
echo " ✓ API 响应压缩（gzip）"
echo " ✓ WebUI 资源懒加载"
echo " ✓ 静态资源缓存（1 小时）"
echo " ✓ 性能监控"
echo ""
echo "使用以下命令查看日志："
echo " tail -f /root/m2lorder/logs/supervisor/api.log"
echo " tail -f /root/m2lorder/logs/supervisor/webui.log"

5.3 性能监控和日志

添加性能监控，了解优化效果：

# /root/m2lorder/app/monitoring/performance.py
"""性能监控模块"""
import time
import logging
from datetime import datetime
from functools import wraps
from typing import Callable, Any

# 配置日志
logging.basicConfig(
    level=logging.INFO,
    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
    handlers=[
        logging.FileHandler('/root/m2lorder/logs/performance.log'),
        logging.StreamHandler()
    ]
)
logger = logging.getLogger('performance')

class PerformanceMonitor:
    """性能监控器"""
    def __init__(self, slow_threshold_ms: int = 1000):
        self.slow_threshold_ms = slow_threshold_ms
        self.request_count = 0
        self.total_response_time = 0

    def monitor_api(self, endpoint: str):
        """API 性能监控装饰器"""
        def decorator(func: Callable) -> Callable:
            @wraps(func)
            async def wrapper(*args, **kwargs) -> Any:
                start_time = time.time()
                self.request_count += 1
                try:
                    result = await func(*args, **kwargs)
                    response_time = (time.time() - start_time) * 1000 # 毫秒
                    self.total_response_time += response_time
                    
                    # 记录慢请求
                    if response_time > self.slow_threshold_ms:
                        logger.warning(
                            f"慢请求检测 - 端点：{endpoint}, "
                            f"响应时间：{response_time:.2f}ms, "
                            f"阈值：{self.slow_threshold_ms}ms"
                        )
                    
                    # 定期记录统计信息
                    if self.request_count % 100 == 0:
                        avg_time = self.total_response_time / self.request_count
                        logger.info(
                            f"性能统计 - 总请求数：{self.request_count}, "
                            f"平均响应时间：{avg_time:.2f}ms"
                        )
                    return result
                except Exception as e:
                    logger.error(f"请求失败 - 端点：{endpoint}, 错误：{str(e)}")
                    raise
            return wrapper
        return decorator

    def get_stats(self) -> dict:
        """获取性能统计"""
        avg_time = 0
        if self.request_count > 0:
            avg_time = self.total_response_time / self.request_count
        return {
            "request_count": self.request_count,
            "total_response_time_ms": self.total_response_time,
            "average_response_time_ms": avg_time,
            "monitor_start_time": datetime.now().isoformat()
        }

# 全局监控器实例
monitor = PerformanceMonitor(slow_threshold_ms=1000)

在 API 中使用监控：

# 在 app/api/main.py 中添加
from app.monitoring.performance import monitor

@app.get("/health")
@monitor.monitor_api("/health")
async def health_check():
    """健康检查端点"""
    return {
        "status": "healthy",
        "service": "m2lorder-api",
        "timestamp": datetime.now().isoformat(),
        "performance_stats": monitor.get_stats() # 添加性能统计
    }

6. 总结

通过本文介绍的 API 响应压缩和 WebUI 资源懒加载优化，你的 M2LOrder 服务应该已经有了明显的性能提升。让我们回顾一下关键要点：

6.1 优化成果总结

API 响应压缩（gzip）带来的好处：

• 响应数据大小减少 70%-90%，显著降低网络传输时间
• 服务器带宽使用量大幅下降
• 移动端和弱网环境用户体验明显改善
• 实现简单，只需添加几行代码

WebUI 资源懒加载的改进：

• 首次加载时间减少 50% 以上
• 页面交互更加流畅
• 资源按需加载，减少初始负担
• 更好的移动端适配性

6.2 实际部署建议

1. 分阶段实施：
   • 先实施 gzip 压缩，这是最简单且效果最明显的优化
   • 再逐步添加 WebUI 懒加载功能
   • 最后考虑高级优化（CDN、HTTP/2 等）
2. 监控优化效果：
   • 使用本文提供的性能监控脚本
   • 定期检查日志，了解服务性能
   • 根据实际使用情况调整优化参数
3. 持续优化：
   • 定期更新依赖库，获取性能改进
   • 关注 Gradio 和 FastAPI 的新版本特性
   • 根据用户反馈调整优化策略

6.3 下一步优化方向

如果你还想进一步提升性能，可以考虑：

1. 数据库和缓存优化：
   • 为频繁访问的模型信息添加缓存
   • 使用 Redis 缓存预测结果
2. 异步处理：
   • 对于批量预测，使用异步任务队列
   • 实现预测结果的流式返回
3. 前端进一步优化：
   • 使用 Service Worker 缓存静态资源
   • 实现预测进度提示
   • 添加离线功能支持
4. 基础设施优化：
   • 使用 Nginx 反向代理，启用更多优化特性
   • 配置 CDN 加速静态资源
   • 使用 HTTP/2 或 HTTP/3 协议

6.4 最后提醒

优化是一个持续的过程，而不是一次性的任务。建议你：

• 定期测试服务性能，记录基准数据
• 关注用户的实际使用反馈
• 根据业务增长调整优化策略
• 保持依赖库的更新，获取最新的性能改进

记住，最好的优化是那些用户能感受到的优化。通过本文的方法，你的 M2LOrder 服务不仅性能更好，用户体验也会更上一层楼。