SSR 与 CSR 测试论证：LightHouse 使用 + CORS 解决办法
如何量化证明 SSR 应用的首屏加载速度优于 CSR 应用？Chrome 内置的 Lighthouse 工具是最直接的性能测试手段。本文将通过实际的对比测试来验证 SSR 的性能优势，并解决测试过程中遇到的 CORS 跨域问题。
测试环境准备
分别构建并启动 SSR（Nuxt）和 CSR（Vue 3 + Vite）应用的生产版本：
# SSR 应用（Nuxt）
pnpm build
pnpm preview # 默认监听 localhost:3000
# CSR 应用（Vue + Vite）
pnpm build
pnpm preview # 默认监听 localhost:4173
bash
使用 Lighthouse 进行性能测试
Lighthouse 是 Chrome DevTools 内置的性能分析工具，可以生成页面加载性能报告。
测试步骤：
- 打开 Chrome 浏览器，访问目标地址（如
http://localhost:3000） - 按
F12打开开发者工具 - 切换到 Lighthouse 面板
- 点击 Analyze page load 按钮
- 等待分析完成，查看 Performance 评分
关键性能指标
Lighthouse 报告中的核心指标包括：
| 指标 | 全称 | 说明 |
|---|---|---|
| FCP | First Contentful Paint | 首次内容绘制时间 |
| LCP | Largest Contentful Paint | 最大内容绘制时间 |
| TTI | Time to Interactive | 页面可交互时间 |
| TBT | Total Blocking Time | 总阻塞时间 |
| CLS | Cumulative Layout Shift | 累积布局偏移 |
实测对比结果
在同等数据条件下（包含图片和接口数据）：
| 指标 | SSR（Nuxt） | CSR（Vue + Vite） |
|---|---|---|
| FCP | ~1.0s | ~2.7s |
| 首屏渲染 | HTML 直出，无需等待 JS | 需等待 JS 下载、解析、执行 |
多次测试取平均值，SSR 的首屏渲染时间通常显著优于 CSR 应用。
测试中遇到的问题与解决方案
问题 1：Preview 模式下图片资源丢失
CSR 应用在 pnpm preview 模式下，图片可能加载失败。
原因：.env.production 中配置的 VITE_BASE_URL 与 preview 端口不匹配。
解决方案：
# .env.production - preview 测试时改为开发服务器端口
VITE_BASE_URL=http://localhost:5173
ini
修改后需要重新构建：
pnpm build
pnpm preview
bash
问题 2：API 接口跨域（CORS）
Preview 服务器运行在 4173 端口，但 API 请求需要发送到 5173 端口的 dev server，存在跨域限制。
解决方案：使用 Vite 的 proxy 配置在 preview 时转发 API 请求：
// vite.config.ts
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:5173',
changeOrigin: true,
},
},
},
})
typescript
对于静态资源的跨域，推荐使用浏览器扩展 i love CORS，安装后在工具栏中启用即可解除跨域限制。
问题 3：动态图标未显示
UnoCSS 中使用动态图标时，图标可能未被打包。
解决方案：在 UnoCSS 配置中设置图标白名单：
// uno.config.ts
export default defineConfig({
safelist: ['i-mdi-web'],
})
typescript
或者通过 collections 配置加载整个图标集：
// uno.config.ts
export default defineConfig({
icons: {
collections: {
// 加载所需的图标集
},
},
})
typescript
问题 4：组件目录下 .vue 文件未编译
构建时 components/ 子目录下的 .vue 文件可能未被打包处理。
解决方案：在 vite.config.ts 的 components 配置中增加目录匹配规则：
export default defineConfig({
components: {
dirs: [
'src/components/**/*.vue',
],
},
})
typescript
测试注意事项
- 关闭多余标签页：Lighthouse 在多标签页打开时可能无法正常分析
- Mock 数据：测试时可临时使用 Mock 数据替代真实接口，确保测试条件一致
- 测试后回退配置：测试完成后务必将
.env.production和 Mock 配置恢复为生产值 - 多次测试取平均值：单次测试结果可能有波动，建议进行 3-5 次测试
# 测试完成后记得回退
# 1. 恢复 .env.production 中的 VITE_BASE_URL
# 2. 恢复 Nuxt 项目中的 Mock 接口配置
bash
结论
通过 Lighthouse 的量化测试可以验证：在首屏渲染性能方面，SSR 应用（Nuxt）的 FCP 通常为 CSR 应用（Vue + Vite）的 1/2 到 1/3。这种优势在页面内容较多、接口请求较复杂的场景下尤为明显。
↑