Hermes: tính năng và tối ưu hóa cho React Native

Hermes là gì?

Hermes là một công cụ JavaScript nhỏ gọn được nhóm Meta tạo ra đặc biệt cho React Native. Nó được công bố vào năm 2019 như một giải pháp thay thế cho JavaScriptCore (JSC), vốn được sử dụng mặc định trong React Native. Mục tiêu chính của Hermes là cung cấp khả năng khởi động nhanh nhất có thể cho các ứng dụng di động, đặc biệt trên Android với tài nguyên hạn chế.

Tính năng chính của Hermes là biên dịch trước (AOT — Ahead-of-Time). Không giống như các công cụ JS truyền thống biên dịch mã trong thời gian chạy (JIT — Just-in-Time), Hermes biên dịch JavaScript thành bytecode trong giai đoạn xây dựng ứng dụng. Điều này có nghĩa là không có biên dịch nào diễn ra trên thiết bị — bytecode được máy ảo Hermes thực thi ngay lập tức.

Hermes không phải là công cụ JS phổ quát — nó được tối ưu hóa dành riêng cho các kịch bản React Native. Nó thiếu các tính năng không cần thiết trong phát triển di động: eval, bộ tạo (generators) và một số tính năng ES6. Điều này cho phép công cụ trở nên nhỏ gọn và nhanh hơn. Theo Meta, kích thước của Hermes khi nén là khoảng 200–300 KB, nhỏ hơn đáng kể so với JSC (khoảng 2–3 MB).

Kiến trúc Hermes và bytecode

Kiến trúc Hermes khác với các công cụ JS truyền thống ở chỗ không có trình biên dịch JIT. Thay vào đó, Hermes sử dụng máy ảo (VM) hiệu quả thực thi bytecode đã được biên dịch trước. Việc loại bỏ JIT mang lại ba lợi thế chính: hiệu suất có thể dự đoán, tiêu thụ bộ nhớ thấp hơn và giảm thời gian khởi động.

Bytecode Hermes là biểu diễn nhỏ gọn của mã JavaScript được tối ưu hóa cho thực thi nhanh. Trong giai đoạn xây dựng (qua Metro), các tệp JavaScript được biên dịch thành tệp .hbc (Hermes Bytecode). Ứng dụng tải các tệp này và VM Hermes thực thi chúng mà không cần biên dịch thêm. Quá trình xây dựng được tích hợp vào Metro thông qua plugin hermes-transformer.

Các giai đoạn xử lý mã

Luồng xử lý JavaScript trong Hermes bao gồm ba giai đoạn: Parse — phân tích cú pháp mã nguồn, Compile — dịch sang bytecode, Execute — thực thi bytecode bởi máy ảo. Hai giai đoạn đầu chạy trong giai đoạn xây dựng, giai đoạn thứ ba chạy trên thiết bị. Điều này khác biệt cơ bản so với JSC, nơi cả ba giai đoạn đều chạy trên thiết bị.

# Biên dịch bytecode Hermes trong khi xây dựng
hermes -emit-binary -out index.hbc index.js

# Kiểm tra kích thước bytecode đã tạo
ls -lh index.hbc

# Hiển thị thống kê bytecode
hermes -dump-bytecode index.hbc

# Tối ưu hóa bytecode cho sản xuất
hermes -O index.js -emit-binary -O target.hbc

Sau khi biên dịch, tất cả tệp .hbc được đóng gói vào APK hoặc IPA cùng với mã gốc. Khi ứng dụng khởi động, VM Hermes tải bytecode và bắt đầu thực thi gần như ngay lập tức — không cần thời gian khởi động JIT, điều thường thấy ở V8 và JSC.

Hermes vs JSC: so sánh

So sánh Hermes và JavaScriptCore (JSC) giúp hiểu khi nào nên chọn công cụ nào. JSC là công cụ JS đầy đủ tính năng từ Apple, được sử dụng trong Safari. Hermes là công cụ chuyên dụng cho React Native. Sự lựa chọn giữa chúng phụ thuộc vào ưu tiên của dự án.

Hermes thắng về tốc độ khởi động và tiêu thụ bộ nhớ nhưng thua JSC về hiệu suất tính toán phức tạp. Biên dịch JIT của JSC tối ưu hóa các đường dẫn mã nóng trong quá trình thực thi, mang lại lợi thế trong các tác vụ tốn CPU. Đối với ứng dụng React Native điển hình, nơi cập nhật UI và điều hướng tạo thành khối lượng công việc chính, Hermes mang lại trải nghiệm người dùng tốt hơn nhờ khởi động nhanh.

Tối ưu hóa Hermes cho React Native

Hermes bao gồm một số tối ưu hóa cụ thể cho React Native. Quan trọng nhất là tích hợp với JSI (JavaScript Interface). Hermes hỗ trợ JSI nguyên bản, cho phép sử dụng kiến trúc React Native mới (Fabric + Turbo Modules) mà không cần thêm lớp trung gian. Điều này làm cho Hermes và kiến trúc mới trở thành cặp đôi lý tưởng cho hiệu suất tối đa.

Quản lý bộ nhớ

Hermes sử dụng bộ thu gom rác thế hệ (generational GC) được tối ưu hóa cho thiết bị di động. Không giống như JSC, nơi thu gom rác có thể gây ra các khoảng dừng đáng chú ý trong UI (jank), Hermes thực hiện GC theo từng phần nhỏ giữa các khung hình, giảm thiểu tác động đến trải nghiệm người dùng. Theo Meta, thời gian dừng GC trong Hermes ngắn hơn 2–3 lần so với JSC trong các kịch bản React Native điển hình.

Lazy require và hằng số

Hermes hỗ trợ tải module lười biếng — một module JavaScript chỉ được biên dịch khi thực sự cần thiết. Điều này giảm kích thước bytecode và tăng tốc khởi động. Ngoài ra, Hermes đánh giá các biểu thức hằng số tại thời điểm biên dịch, thay thế các lời gọi hàm bằng giá trị hằng số khi có thể.

// Ví dụ tối ưu hóa cụ thể của Hermes

// 1. Hermes nội tuyến biểu thức hằng số
const TAX_RATE = 0.07;
const price = 100;
// Hermes tính toán trước: TAX_RATE * price trong khi biên dịch
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes tối ưu hóa chuỗi truy cập thuộc tính
const config = { api: { timeout: 5000 } };
// Hermes lưu cache truy cập config.api nội bộ
const timeout = config.api.timeout;
fetch(url, { timeout });

Điều quan trọng cần lưu ý là Hermes hỗ trợ gỡ lỗi qua Chrome DevTools (từ Hermes 0.12). Nhà phát triển có thể sử dụng các công cụ quen thuộc: điểm dừng, hồ sơ bộ nhớ, kiểm tra biến. Điều này loại bỏ một trong những phản đối chính đối với Hermes trong các phiên bản đầu, nơi việc gỡ lỗi bị hạn chế.

Thiết lập Hermes trong dự án React Native

Việc thiết lập Hermes phụ thuộc vào phiên bản React Native. Từ React Native 0.70, Hermes được bật mặc định cho các dự án mới. Đối với các dự án đã tạo trước đó, hoặc khi chuyển đổi giữa các công cụ, cấu hình được thực hiện qua cài đặt xây dựng.

Thiết lập cho Android

Đối với Android, Hermes được bật trong tệp android/app/build.gradle qua cờ hermesEnabled. Đối với iOS, cấu hình được thực hiện trong Podfile qua biến :hermes_enabled. Sau khi thay đổi cấu hình, bạn cần cài đặt lại pods và xây dựng lại dự án.

// android/app/build.gradle — bật Hermes
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — bật Hermes
hermes_enabled = true
pod 'hermes-engine'

Để xác minh Hermes đang chạy trong ứng dụng, hãy chạy adb logcat | grep Hermes trên Android hoặc kiểm tra bảng điều khiển Xcode trên iOS. Khi ứng dụng khởi động, Hermes xuất ra thông báo như “Hermes VM initialized” hoặc tương tự. Bạn cũng có thể kiểm tra globalThis.HermesInternal trong mã JavaScript — nếu Hermes đang hoạt động, thuộc tính này sẽ khả dụng.

// Kiểm tra Hermes có đang chạy không
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Công cụ Hermes đang hoạt động');
  console.log(
    'Phiên bản:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes không hoạt động (dự phòng JSC)');
}