Sogou Baike Mobile Front‑End System Upgrade: Architecture, Process, and Performance Optimization

Background : The Sogou Baike mobile front‑end project suffered from fragmented development processes, weak architecture, low development efficiency, and poor page performance. To better support product iteration and improve efficiency, the team launched a systematic upgrade of the mobile front‑end technical stack.

Project Benefits : The upgrade aimed to enhance user experience, reduce bandwidth costs, and consolidate technical knowledge.

Current Situation Analysis :

Project organization – three separate projects (entry page, video collection page, static pages) with duplicated components, modules, APIs, and services, making reuse difficult.

Technical architecture – composed of an access layer (IAS), presentation layer (React + Zepto), and a thin rendering layer (Koa). Issues include lack of SSR, no routing/state management, excessive logging, and heavy client‑side resource loading.

Development process – no unified coding standards, cumbersome startup steps (whistle, many path forwards), and no dedicated test environment.

Testing & release – manual deployments, no gray‑scale release, repeated compilation and CDN publishing.

Performance – first‑screen render time 2.3‑2.4 s (vs. 1.0‑1.2 s for other products), high TTFB, large LCP, many resource requests, and redundant data in SSR payloads.

Optimization Actions :

Project organization : Consolidated all mobile pages into a single repository, introduced alias paths for cross‑directory imports, and improved component/service reuse.

Architecture upgrade : Adopted React‑SSR with server‑side rendering, added React‑Router and Redux for routing and state management, split the rendering layer into control and business‑logic layers, and standardized logging (saving ~16 GB disk space per day).

Process improvement : Integrated Tencent code standards and quality gates, migrated CI/CD to Blue Shield Stream CI, introduced one‑click service start via webpack plugin, and reduced manual intervention in testing and release pipelines.

Performance optimization : Data trimming – reduced first‑screen SSR payload from 40.52 KB to 17.44 KB (‑59.6%). Resource optimization – lazy‑load off‑screen images, on‑demand loading of non‑critical resources, removed Swiper in favor of native carousel, and applied sprite‑sheet merging. Request reduction – first‑screen resource requests dropped from 178 to 37 (‑79%). LCP improvement – eliminated redundant image requests and Swiper, decreasing LCP from ~3.08 s to a lower value.

Monitoring enhancement : Added probe and offline monitoring for all pages, unified logging pipelines, and completed four offline monitoring reports and twelve probe monitors.

Results :

First‑screen CTR increased by 11.18% (0.0327).

First‑contentful paint reduced from 1011 ms to 682 ms (‑32.6%).

Page load time decreased from 2499 ms to 1886 ms (‑24.5%).

IAS bandwidth cut from 103.37 MB to 66.36 MB (‑35.8%), saving ~0.9 万 CNY per year.

Cloud‑Map QPS reduced from 738 to 217 (‑70.5%), cost reduced by 58% (~0.43 万 CNY/year).

ATTA log volume halved, saving ~19.8 万 CNY per year.

Technical deliverables: SSR framework @tencent/vini-renderer , scaffolding @tencent/vini-cli , CSS‑in‑JS with styled‑components, and over 10 technical documents.

Conclusion & Outlook : The upgrade established a solid, modern front‑end foundation covering React, Vue, Hippy, and WeChat Mini‑Program stacks, enabling cross‑project collaboration and future performance tuning. Ongoing work includes migrating Node services to cloud, further bandwidth optimization, and continuous user‑experience improvements.