--- description: 生产就绪检查清单：测试、安全、性能优化。确保代码不仅能跑，还能安全、快速地在生产环境运行。 --- import { Callout, Steps, Tabs } from 'nextra/components' import PaywallOnly from '@/components/PaywallOnly' # 8.5 生产就绪检查清单 **学完这节你会**： - 掌握 Vitest 测试框架快速上手 - 理解三大安全隐患及防护方法 - 学会使用 Lighthouse 分析性能 - 使用完整检查清单确保生产就绪 ## 为什么这很重要你的代码在本地能跑，不代表可以直接上线。生产环境需要考虑： - **测试**：改代码后，如何快速验证没有破坏其他功能？ - **安全**：如何避免密钥泄露、SQL 注入、XSS 攻击？ - **性能**：如何让网站加载更快，用户体验更好？ > **本地能跑 ≠ 生产就绪。这个检查清单帮你确保代码可以安全、快速地上线。** ## 一、测试：从 console.log 到自动化测试 ### 为什么零基础学员也需要写测试 | 场景 | 无测试 | 有测试 | |-----|-------|--------| | **修改代码** | 改完手动测一遍，可能漏掉边界情况 | 运行测试，3 秒知道有没有坏 | | **重构代码** | 不敢动，怕改坏 | 大胆重构，测试保证功能不变 | | **部署上线** | 祈祷没有 bug | 测试通过才上线，心里有底 | ### 快速上手：Vitest > **什么是 Vitest？** Vitest 是一个现代化的 JavaScript 测试框架，专为 Vite 项目优化（也支持 Next.js）。它可以自动运行测试代码，检查函数是否按预期工作。类似于"自动化质检员"，每次改代码后运行 `npm test`，几秒钟就能知道有没有破坏现有功能。 #### 步骤 1：安装 ```bash npm install -D vitest @vitejs/plugin-react ``` #### 步骤 2：配置 ```javascript // vitest.config.js import { defineConfig } from 'vitest/config' import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], test: { environment: 'jsdom', }, }) ``` #### 步骤 3：编写测试 ```javascript // utils/formatDate.test.js import { formatDate } from './formatDate' describe('formatDate', () => { test('formats date correctly', () => { const date = new Date('2025-01-24') expect(formatDate(date)).toBe('2025-01-24') }) test('handles invalid date', () => { expect(formatDate(null)).toBe('Invalid Date') }) }) ``` > **什么是 describe/test/expect？** 这是测试代码的三个核心函数。`describe` 用于分组测试（如"formatDate 的所有测试"），`test` 定义单个测试用例（如"正确格式化日期"），`expect` 断言结果是否符合预期（如"期望结果是 '2025-01-24'"）。简单理解：describe 是文件夹，test 是文件，expect 是检查点。 #### 步骤 4：运行测试 ```bash npm test ``` ### 测试 API 函数 ```javascript // utils/api.test.js import { fetchPosts } from './api' import { vi } from 'vitest' global.fetch = vi.fn() describe('fetchPosts', () => { test('fetches posts successfully', async () => { const mockPosts = [{ id: 1, title: 'Test' }] fetch.mockResolvedValueOnce({ ok: true, json: async () => mockPosts }) const posts = await fetchPosts() expect(posts).toEqual(mockPosts) }) test('throws error on failed fetch', async () => { fetch.mockResolvedValueOnce({ ok: false }) await expect(fetchPosts()).rejects.toThrow('Failed to fetch') }) }) ``` > **什么是 Mock（模拟）？** Mock 是测试中的"替身演员"。`vi.fn()` 创建一个假的 `fetch` 函数，`mockResolvedValueOnce` 让它返回假数据。这样测试时不会真的调用 API（避免依赖网络、浪费配额），而是用假数据模拟 API 的行为。就像拍电影用替身一样，测试用 Mock 代替真实的外部调用。 ### 测试检查清单 - [ ] **核心功能**：API 函数、数据处理逻辑是否有测试？ - [ ] **边界情况**：是否测试了空值、null、空数组？ - [ ] **错误情况**：是否测试了异常情况（如网络失败）？ - [ ] **运行速度**：测试是否快速（单元测试应在 1 秒内完成）？ ## 二、安全：避免常见安全隐患 ### 隐患 1：密钥泄露 #### ❌ 危险：硬编码密钥 ```javascript // ❌ 密钥写死在代码里 export const API_KEY = 'sk-1234567890abcdef' const response = await fetch('https://api.openai.com/v1/chat', { headers: { 'Authorization': `Bearer sk-1234567890abcdef` } }) ``` #### ✅ 安全：环境变量 ```bash # .env (不要提交到 Git!) OPENAI_API_KEY=sk-1234567890abcdef NEXT_PUBLIC_API_URL=https://api.example.com ``` ```javascript // config.js export const config = { openaiKey: process.env.OPENAI_API_KEY, apiUrl: process.env.NEXT_PUBLIC_API_URL } // 检查必需的环境变量 if (!config.openaiKey) { throw new Error('Missing OPENAI_API_KEY') } ``` ```gitignore # .gitignore .env .env.local .env.*.local ``` ### 隐患 2：SQL 注入 > **什么是 SQL 注入？** SQL 注入是一种安全攻击，攻击者通过在输入框中输入特殊的 SQL 代码（如 `admin' OR '1'='1`），篡改数据库查询，获取不该看到的数据。就像在门锁上插入万能钥匙，绕过身份验证。防御方法是使用"参数化查询"，让数据库自动转义特殊字符，把恶意代码当成普通文本处理。 #### ❌ 危险：字符串拼接 ```python # ❌ 直接拼接用户输入 query = f"SELECT * FROM users WHERE username = '{username}'" ``` **攻击场景**：用户输入 `admin' OR '1'='1`，实际执行： ```sql SELECT * FROM users WHERE username = 'admin' OR '1'='1' ``` #### ✅ 安全：参数化查询 ```python # ✅ 使用参数化查询 query = "SELECT * FROM users WHERE username = ?" result = db.execute(query, (username,)) ``` ### 隐患 3：XSS 攻击 > **什么是 XSS 攻击？** XSS（跨站脚本攻击）是指攻击者在输入框中输入恶意 JavaScript 代码（如 ``），如果网站直接渲染这段代码，就会执行恶意脚本，可能窃取用户 Cookie、劫持账号。防御方法：React 默认会转义 HTML 标签，把 `