How to Overcome the Top 5 Challenges of Large‑Scale SPA Development

Reading note: the discussion assumes a large SPA with 30+ pages, 100+ components, heavy data interaction, and hash‑based routing.

Challenge 1: Frontend Componentization

Componentization aims not at reuse but at standardizing components to improve production efficiency, similar to using off‑the‑shelf parts for a car while designing only the chassis and body.

Challenge 2: Decentralized Routing

Centralized route declarations become cumbersome as pages grow. A simple static file structure served by Nginx can replace explicit route definitions, e.g.: /post/{page_name}.html or an even shorter pattern: /p/{name}.html With this convention a single page.js loader can fetch the appropriate HTML without maintaining a central router.

Challenge 3: Domain Data Centralization

Frequent API calls cause redundant network traffic and inconsistent state across pages. Introducing a shared store with a unified in‑memory cache solves data read/write, synchronization, and format conversion.

Example stores (illustrated as fruit‑store, clothes‑store, etc.):

var bannerStore = new fruitStore();
var appleStore = new fruitStore();

The store handles scenarios such as synchronized likes, collection status, and comment counts across multiple pages.

It also provides input and output formatting so components receive data in a consistent shape regardless of the original API response.

Challenge 4: Hybrid App Integration

Hybrid apps that request HTML from a server can still benefit from SPA techniques. Issues include URL query parameters bypassing cache, page transitions causing cache reloads, versioned offline resources, and offline storage of JS/CSS and icons.

Challenge 5: Performance Optimization

For detailed performance tips, refer to the linked discussion by @前端农民工.