Performance Optimization Practices for JD's Tongtian Tower Frontend Project

The article introduces the Tongtian Tower project, a long‑standing, complex activity‑page builder at JD.com, and explains why front‑end performance became a top priority in 2023, ultimately achieving a 58.8% improvement in first‑screen loading speed.

Common analysis tools

Chrome DevTools provides Network for resource size, priority and caching analysis, Performance for runtime profiling, Waterfall for visual load timing, and Lighthouse for overall page quality scores. The article also mentions webpack‑bundle‑analyzer for bundle inspection and Coverage for code‑usage analysis.

Main optimization directions

1. Accelerate resource requests : fully utilize HTTP caching, CDN, Service Workers, and client‑side storage (cookies, localStorage, IndexedDB). Upgrade to HTTP/2 or HTTP/3 to enable multiplexing and header compression, and spread assets across multiple sub‑domains (e.g., cdn1.jd.com, cdn2.jd.com).

2. Prefetch and preload critical resources:

<link rel="dns-prefetch" href="//cdn1.jd.com">
<link rel="dns-prefetch" href="//cdn2.jd.com">
<link rel="dns-prefetch" href="//cdn3.jd.com">

<link rel="preload" as="font" href="xxxx.woff" />

3. Bundle analysis and reduction : use tree‑shaking, import only needed modules, avoid wildcard imports, and replace heavy libraries with lighter alternatives (e.g., Day.js instead of Moment.js). Example of converting a wildcard import to a named import:

import * as xxxx‑ui from 'xxxx‑ui'
const Button = xxxx‑ui['Button']

import { Button } from 'xxxx‑ui'

4. Lazy‑load non‑critical code with React.lazy and dynamic import :

const Header = React.lazy(() => import(/* webpackChunkName:"Header" */ './Component/Header'))

5. Use CDN for third‑party plugins and add async or defer to script tags to avoid blocking:

<script src="https://cdn1.jd.com/xxx.js" async></script>

6. Compress assets : enable Gzip/Brotli on the server, compress images (WebP), minify HTML with HtmlWebpackPlugin , and shrink font files with tools like Fontmin.

7. Remove unused code and language packs by configuring sideEffects in package.json and stripping console.log and debugger statements:

new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      drop_console: true,
      drop_debugger: true
    }
  }
})

Business‑logic optimizations

Prioritize data pagination, issue early non‑blocking requests, split heavy modules, apply debounce/throttle to high‑frequency events, and consider server‑side rendering for complex calculations. Also, consolidate similar code into shared utilities and limit the number of listeners and timers.

Conclusion

The project demonstrates that systematic performance analysis, proper tooling, and disciplined code practices can dramatically improve user experience without sacrificing functionality, and that product planning, stable architecture, and unified interaction design are essential complements to pure technical optimization.