Hướng dẫn Flutter Performance Optimization (rebuild, jank, R8, ProGuard)

Performance là yếu tố quan trọng quyết định trải nghiệm người dùng. Bài viết này sẽ hướng dẫn bạn các kỹ thuật tối ưu hiệu suất Flutter từ cơ bản đến nâng cao.

1. Giảm Rebuilds không cần thiết

Vấn đề:

Widget rebuild quá nhiều lần làm giảm performance:

[object Object]

Giải pháp:

1. Sử dụng const constructors

[object Object]

2. Tách StatefulWidget nhỏ

[object Object]

3. Sử dụng ValueNotifier

[object Object]

2. Loại bỏ Jank (Frame Drops)

Jank là gì?

Jank xảy ra khi frame render mất hơn 16ms (60 FPS) hoặc 8ms (120 FPS).

Nguyên nhân:

1. Heavy computations trên UI thread
2. Large widget trees
3. Expensive rebuilds
4. Synchronous operations

Giải pháp:

1. Sử dụng compute() cho heavy tasks

[object Object]

2. Lazy Loading

[object Object]

3. Sử dụng RepaintBoundary

[object Object]

4. Debounce và Throttle

[object Object]

3. Tối ưu Images

1. Sử dụng Image.asset với cache

[object Object]

2. Sử dụng cached_network_image

[object Object]

3. Lazy load images

[object Object]

4. Tối ưu Lists

1. Sử dụng ListView.builder

[object Object]

2. Sử dụng itemExtent

[object Object]

3. Sử dụng addAutomaticKeepAlives

[object Object]

5. R8 và ProGuard

R8 (Android)

R8 là công cụ shrink và obfuscate code cho Android.

Setup:

[object Object]

ProGuard Rules:

[object Object]

ProGuard (Android)

ProGuard giúp:

• Shrink: Xóa code không dùng
• Obfuscate: Làm khó đọc code
• Optimize: Tối ưu bytecode

6. Build Optimization

1. Split APKs

[object Object]

2. Enable Tree Shaking

[object Object]

3. Remove Unused Assets

[object Object]

7. Memory Optimization

1. Dispose Resources

[object Object]

2. Weak References

[object Object]

8. Performance Monitoring

1. Flutter DevTools

[object Object]

2. Timeline

[object Object]

Best Practices

1. Const Everything

[object Object]

2. Avoid setState trong build()

[object Object]

3. Use Keys đúng cách

[object Object]

Kết luận

Tối ưu performance giúp:

• ✅ Ứng dụng mượt mà hơn
• ✅ Giảm memory usage
• ✅ Giảm app size
• ✅ Trải nghiệm người dùng tốt hơn

Tóm tắt:

1. Reduce Rebuilds: Const widgets, tách StatefulWidget
2. Eliminate Jank: compute(), lazy loading, debounce
3. Optimize Images: Cache, resize, lazy load
4. Optimize Lists: ListView.builder, itemExtent
5. R8/ProGuard: Shrink và obfuscate code
6. Memory: Dispose resources, weak references
7. Monitoring: DevTools, Timeline

Áp dụng các kỹ thuật này sẽ giúp ứng dụng Flutter của bạn nhanh và mượt mà hơn!

---

Tác giả: Admin
Ngày đăng: 29/01/2025
Chuyên mục: Flutter