Optimizing Weex Frontend Performance for Xianyu

Background – Xianyu’s Weex pages suffered from long white‑screen times, often requiring multiple navigation jumps before a page became usable. The team measured the time from navigationStart to first paint (FP) and to full first‑screen render (FSP), finding that on many devices the first‑screen time exceeded 2 s, and on low‑end phones up to 3‑5 s.

Before/After Comparison – Recording the live channels showed a clear reduction in first‑screen duration after optimization across iOS and Android devices, with low‑end phones dropping below 2 s and mid‑high‑end phones achieving near‑instant display.

Root‑Cause Analysis – Three main factors dominated the latency: large bundle size, first‑screen data request latency, and the amount of UI rendered on the first screen.

Optimization Plan – The solution was split into four layers:

Bundle offline caching

Data prefetching

Progressive first‑screen rendering

On‑demand rendering and bundle slimming

Bundle Offline – Weex bundles are indexed by URL prefix and stored locally using an updated strategy that adds a “idle‑time install” mode. This raised bundle hit‑rate to ~90 % and cut load time.

Data Prefetch – The first‑screen request configuration is serialized into the URL, fetched at navigationStart, and cached with a hash key. Subsequent visits retrieve cached data instantly while the network request proceeds in parallel, reducing perceived latency.

Progressive First‑Screen – A skeleton screen is shown on first entry; on repeat visits cached data is rendered immediately, and fresh data updates the UI when it arrives. Image loading is transitioned with a fade‑in to avoid flicker.

Low‑End Device Degradation – Only the first‑screen tab receives cached placeholders, and data volume is trimmed to ease rendering on weaker hardware.

On‑Demand Rendering – Only visible components are rendered initially; non‑visible tabs and long lists are lazy‑loaded. Heavy components are replaced with lightweight alternatives.

Bundle Slimming – Using Webpack Bundle Analyzer, duplicate npm versions were removed, common modules extracted, and utilities refactored for on‑demand loading, reducing bundle size and saving 1‑2 ms per KB on Android.

Result – After deploying these measures, first‑screen times dropped significantly across device tiers, with many pages approaching “instant open” on mid‑high‑end phones.