Performance, tests, bundling và frontend supply chain
Optimize bằng user-centric measurement và shipped artifact; dev bundle, synthetic microbenchmark hay Lighthouse score đơn lẻ không chứng minh production UX.
1. Performance và critical path
Critical rendering path, long tasks, layout/paint, JS parse/execute, memory và network waterfall đều có thể tạo jank. Theo dõi Core Web Vitals/RUM theo device/network; synthetic lab giúp repeatability nhưng không thay field data.
- Đặt budget cho initial JS, chunks, images và main-thread work.
- Profile CPU/heap/coverage trước khi memoize hoặc split code.
- Phân biệt cache hit, parse cost, network latency và interaction delay.
2. Testing strategy
| Layer | Target | Trade-off |
|---|---|---|
| Unit | Pure logic, type/state transitions | Nhanh nhưng không chứng minh DOM/network contract |
| DOM/component | User interaction, accessibility role, async state | Ổn định hơn implementation-detail selectors |
| Contract/API | Request/response/schema compatibility | Cần fixture/version ownership |
| Browser E2E | Critical flow và cross-origin behavior | Đắt/chậm; chọn smoke path có giá trị |
Fake timers/network có giới hạn; test cancellation, race và cleanup thật ở một số integration layer. Tránh assert private implementation khi hành vi user-facing mới là contract.
3. Build, bundling và source maps
Transpile đổi syntax; bundle resolve module graph; minify đổi representation. ESM static graph hỗ trợ tree shaking, code splitting giảm initial cost nhưng tăng request/cache coordination. Analyze duplicate dependencies, content-hash assets và giữ source-map access private nếu map chứa source nhạy cảm.
source -> typecheck/transpile -> bundle/split -> minify
-> content-hashed artifact -> immutable deploy/cache4. Supply chain và delivery
Lockfile/registry integrity, dependency review/audit, install scripts, provenance/SBOM, immutable CI artifact và CSP là một chuỗi. Untrusted PR không nhận publish/deploy secrets; pin action/tool versions và verify artifact trước promote.