Performance Optimization Strategies for JD PLUS Membership Frontend: Architecture Upgrade, PWA, Babel Polyfill, Caching, and Image Formats

The JD PLUS membership project, a high‑traffic e‑commerce paid‑member service, faces massive demand and frequent iterations, prompting a series of front‑end performance optimizations.

Architecture Upgrade : The project migrates to the Gaea4.0 scaffold, a Vue SPA scaffold built on webpack 4, Babel 7, and upgraded loaders. Improvements include webpack 4 scope hoisting, smaller production bundles, faster incremental builds, integrated Carefree LAN debugging, NutUI on‑demand components, SMOCK data‑mocking, skeleton‑screen generation, and native PWA support.

Babel Polyfill On‑Demand : By configuring @babel/preset-env with useBuiltIns: "usage" and installing @babel/polyfill, only the polyfills required for the targeted browsers are injected, reducing bundle size by over 60 KB compared with the full babel‑polyfill package.

PWA & Persistent Caching : ServiceWorker caches static assets (excluding HTML and API data) to speed up repeat visits. Versioned URLs ensure updated business code bypasses the cache, while stable libraries (Vue, plugins) remain cached via webpack DllPlugin and DllReferencePlugin.

Request Optimization : Critical API calls are pre‑fetched or rendered server‑side into the initial HTML to break serial dependencies, dramatically advancing first‑screen rendering time.

Skeleton Screens : The @nutui/draw-page-structure plugin generates DOM‑based skeleton screens, giving users a perceived faster load.

Image Format Optimization : WebP is used where supported, cutting image size from 35 KB (PNG) to 4 KB. The proprietary DPG format further compresses JPEGs by ~50 % while remaining universally compatible.

Collectively, these measures shrink load time, reduce bandwidth, and improve user experience on the mobile H5 front‑end.