# 部署到自己服务器指南

## ✅ 已完成的优化

### 1. 移除 Tailwind CSS CDN
- ✅ 已安装 `tailwindcss@^3`、`postcss`、`autoprefixer`
- ✅ 已创建 `tailwind.config.js` 和 `postcss.config.js`
- ✅ 已创建 `src/index.css` 并在 `index.tsx` 中导入
- ✅ 样式会被打包到 `dist/assets/index-*.css`

### 2. 移除 React 相关的 ESM.sh CDN
- ✅ `package.json` 中已有所有依赖
- ✅ 移除了 HTML 中的 `<script type="importmap">`
- ✅ Vite 会自动打包所有 React 相关依赖到 `dist/assets/index-*.js`

### 3. 字体处理
- ⚠️ 目前仍使用 Google Fonts CDN
- 选项1：保持 CDN（推荐，字体文件大）
- 选项2：本地化字体（见下文）

## 📦 构建和部署步骤

### 1. 安装依赖
```bash
npm install
```

### 2. 构建生产版本
```bash
npm run build
```

### 3. 检查 dist 目录
构建后会生成：
```
dist/
├── index.html
└── assets/
    ├── index-[hash].js   # 所有JS打包后的文件
    └── index-[hash].css  # 所有CSS打包后的文件
```

### 4. 部署到服务器
将整个 `dist` 目录上传到服务器，例如：
```bash
# Nginx 配置示例
server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

## 🎨 可选：本地化 Google Fonts

如果需要完全离线，下载 Inter 字体：

1. 安装字体文件到 `public/fonts/`
2. 修改 `src/index.css`：
```css
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
}
/* 其他字重... */

@tailwind base;
@tailwind components;
@tailwind utilities;
```

## ⚙️ 环境变量

如果使用环境变量（如 API Key），在服务器上设置：
```bash
# .env.production
GEMINI_API_KEY=your_api_key
```

构建时会自动注入到代码中（见 `vite.config.ts`）。

## 🚀 性能优化建议

当前打包文件较大 (621KB)，可以考虑：

1. **代码分割**：使用动态导入
```typescript
const DetailPage = lazy(() => import('./pages/DetailPage'));
```

2. **手动分包** (vite.config.ts)：
```typescript
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'react-vendor': ['react', 'react-dom', 'react-router-dom'],
        'charts': ['recharts'],
      }
    }
  }
}
```

## 📝 注意事项

1. ✅ 所有依赖已本地化（除字体）
2. ✅ 无需依赖外部 CDN（除 Google Fonts）
3. ✅ 支持单页面应用路由
4. ⚠️ 确保服务器配置了正确的 MIME 类型
5. ⚠️ 如果使用 HTTPS，Google Fonts CDN 可正常工作