Bài 10. Optimizing React Applications
1. Giới thiệu
1.1. Tầm quan trọng của optimization trong React apps
1.2. Phạm vi của bài viết: các techniques và tools sẽ được đề cập
2. Đánh giá hiệu năng (Performance Profiling)
2.1. Chrome DevTools
2.1.1. Flame graphs
2.1.2. Waterfall view
2.2. React DevTools2.2.1. Components tab
2.2.2. Profiler tab
3. PureComponent và React.memo
3.1. Shallow Comparison
3.2. Khi nào và khi nào không sử dụng PureComponent/React.memo
4. Virtual DOM và Reconciliation
4.1. Cách React quản lý thay đổi
4.2. Key Prop trong Lists
5. Lazy Loading và Code Splitting
5.1. Dynamic Imports
5.2. React.lazy và Suspense
5.3. Route-based code splitting
6. Debouncing và Throttling trong Event Handling
6.1. Concept và khác biệt
6.2. Sử dụng Lodash hoặc custom hooks
7. useMemo và useCallback
7.1. Cách hoạt động và use cases
7.2. Cảnh báo về việc over-optimization
8. Server-side Rendering (SSR) và Static Site Generation (SSG)
8.1. Next.js và khái niệm về SSR/SSG
8.2. Khi nào nên sử dụng
9. Web Workers trong React
9.1. Concept và use cases
9.2. Thư viện như Comlink để giảm boilerplate
10. Best Practices
10.1. Performance Budgets
10.2. Monitoring và Analytics
10.2.1. Google Lighthouse
10.2.2. Real User Monitoring (RUM)
11. Kết luận
11.1. Tóm tắt những techniques quan trọng
11.2. Preview các chủ đề tiếp theo trong series
12. Tài liệu tham khảo và Resources
Trong dàn ý này, tôi đã bao gồm các phần từ cơ bản đến nâng cao để bạn có thể đề cập đến optimization trong React một cách toàn diện.