RollCode发布系统

RollCode拥有一套完善的页面发布系统，利用SSG静态页面预渲染技术，可提前为页面生产静态数据和样式，为用户提供快速访问体验。用户访问时可直接获取已渲染完成的页面，不仅能大幅提升加载速度与访问体验，更能显著优化 SEO 表现。

特点

• 安全的发布机制

  发布失败自动回滚，确保发布过程安全可靠， 每次发布都会生成一个版本快照，支持随时回滚到任意历史版本。

• 极致的页面性能优化

  预渲染技术确保页面在构建时生成完整HTML，无运行时框架依赖，无SSR服务压力，部署成本极低，访问速度极快。

• SEO友好优化

  预渲染生成的静态HTML包含完整页面内容，搜索引擎可直接抓取和索引，大幅提升页面在搜索结果中的排名和曝光度。

• 灵活的发布策略

  同时支持预览链接和线上发布链接，满足不同场景需求。私有化部署用户如无需SSG 发布功能，可直接使用预览链接使用，节省资源消耗。

• 多环境部署支持

  支持导出完整代码，可部署到任意服务器或CDN，灵活适配各种部署环境。同时支持私有化部署和公有云部署，满足不同企业需求。

工作流程

1. 解析项目路由和页面树信息

   构建前系统会解析项目的唯一路径（path），并固定所有路由和页面树结构信息，为后续构建流程奠定基础。

2. 解析页面路由和组件树

   针对项目下的每个页面，系统会解析其唯一路径，并深入分析组件树结构，提取其中的数据绑定、事件处理和行为逻辑。

3. 加载远程扩展组件和npm包

   系统会根据页面内容自动分析依赖关系，进行智能分包优化。对于远程扩展组件，会提前下载并加载到本地构建环境。

4. 运行本地服务器预渲染静态内容

   所有页面（包括使用远程组件和基础组件的页面）都会经过预渲染处理，生成首屏静态HTML内容，确保用户访问时能快速看到页面内容。

5. 合并共有代码产物并部署

   系统会对构建产物进行优化，合并公共代码以减少体积，最终生成可部署的静态文件。

---

发布成功后，系统会自动生成该项目配置的路由线上链接，用户可直接访问。同时RollCode也支持导出代码，用户可将代码部署到任意服务器上。

页面效果对比

测试环境

• 网络环境：模拟 4G 网络
• 浏览器模式：无痕模式
• 测试工具：Chrome DevTools Performance
• 测试页面：
  • 左（SSG）：线上链接 https://h5.rollcode.cn/dianshang
  • 右（SPA）：预览链接 https://h5.rollcode.cn/console/preview?projectId=5323c86f-65f7-4990-8c8b-52cba2e85dd0&pageId=74624aa0-f153-4e51-a1dd-2402cba81f7c
• 注意：预览链接是基于同一项目生成的 SPA 预览链接，内容与线上链接一致，可保证测试结果的可靠性。

性能测试报告

LCP (Largest Contentful Paint) 测试数据

测试轮次	SSG (线上链接)	SPA (预览链接)	性能提升
第 1 次	2.58s	8.98s	71.3%
第 2 次	2.42s	9.15s	73.6%
第 3 次	2.65s	8.76s	69.7%
第 4 次	2.51s	9.32s	73.1%
第 5 次	2.73s	8.89s	69.3%
第 6 次	2.38s	9.21s	74.2%
第 7 次	2.59s	8.95s	71.1%
第 8 次	2.46s	9.08s	72.9%
第 9 次	2.67s	8.82s	69.7%
第 10 次	2.54s	9.14s	72.2%
平均值	2.55s	9.03s	71.7%

其他核心性能指标对比

性能指标	SSG (平均值)	SPA (平均值)	性能提升
FCP (First Contentful Paint)	1.2s	4.8s	75.0%
TTI (Time to Interactive)	2.8s	10.5s	73.3%
TBT (Total Blocking Time)	120ms	850ms	85.9%
CLS (Cumulative Layout Shift)	0.05	0.12	58.3%
页面总加载时间	3.2s	11.8s	72.9%

测试结论

通过 10 轮测试数据的统计分析，SSG 静态页面发布方案相比 SPA 预览方案在性能表现上具有显著优势：

• LCP 平均提升 71.7%：SSG 页面平均 LCP 为 2.55 秒，而 SPA 页面为 9.03 秒
• 首屏渲染速度提升 75%：FCP 从 4.8 秒降至 1.2 秒
• 交互响应速度提升 73.3%：TTI 从 10.5 秒降至 2.8 秒
• 阻塞时间减少 85.9%：TBT 从 850ms 降至 120ms，用户体验更流畅

这些数据充分证明了 SSG 预渲染技术在页面性能优化方面的卓越表现，能够为用户提供更快速、更流畅的访问体验。