Điều gì sẽ xảy ra từ Công cụ Hermes trong React Native 0.70

Các bạn đọc like giúp ủng hộ MUO nhé. Khi bạn mua hàng bằng các liên kết trên trang web của chúng tôi, chúng tôi có thể kiếm được hoa hồng liên kết.

React Native 0.70 đã ra mắt và Hermes là công cụ vận chuyển JavaScript mặc định mới với bản cập nhật này. Dưới đây là những gì mong đợi từ Hermes và một số tính năng sẽ ảnh hưởng đến hiệu suất của ứng dụng React Native của bạn.

Hermes là gì?

Hermes là một công cụ JavaScript mã nguồn mở tối ưu hóa hiệu suất trong quá trình khởi chạy ứng dụng iOS và Android bằng cách biên dịch trước mã JavaScript thành mã bytecode hiệu quả và giảm mức sử dụng bộ nhớ ứng dụng.

android không thể chuyển ứng dụng sang thẻ sd

LÀM VIDEO TRONG NGÀY

Cập nhật các phiên bản React Native cũ hơn để hỗ trợ Hermes

Các ứng dụng React Native chạy trên 0.70 sẽ được bật Hermes theo mặc định. Đối với các ứng dụng React Native cũ hơn, bản dựng Hermes đi kèm với mọi phiên bản React Native bắt đầu từ phiên bản 0.60.4 cho các bản dựng Android và phiên bản 0.64.0 cho iOS. Các phiên bản phù hợp loại bỏ nguy cơ không phù hợp phụ thuộc trong ứng dụng React Native của bạn.

Để bật Hermes trong các phiên bản React Native cũ hơn này, bạn sẽ cần thêm một số cấu hình cho cả ứng dụng Android và iOS của mình.

Trên Android, hãy chỉnh sửa android / app / build.gradle tập tin:

project.ext.react = [ 
    entryFile: "index.js", 
    enableHermes: true  // clean and rebuild if changing 
]

Trên iOS, bạn thực hiện các thay đổi sau đối với ios / Podfile :

use_react_native!( 
    :path => config[:reactNativePath], 
    :hermes_enabled => true 
)

iOS yêu cầu bạn cài đặt Hermes pod sau khi định cấu hình cài đặt.

Chạy lệnh sau để cài đặt các nhóm:

cd ios && pod install

Kích hoạt Hermes với Expo

Bạn cũng có thể sử dụng công cụ Hermes cho các ứng dụng React Native được xây dựng hoặc chạy bằng Expo. Thư viện Expo hỗ trợ Hermes từ SDK phiên bản 42 trên Android và SDK phiên bản 43 trên iOS đến phiên bản hiện tại 0.70. Điều quan trọng cần lưu ý là các ứng dụng độc lập không thể chạy Hermes trừ khi được tạo bằng Bản dựng Dịch vụ Ứng dụng Expo.

Để bật Hermes trong ứng dụng React Native, hãy chỉnh sửa app.json tập tin:

{ 
  "expo": { 
    "jsEngine": "hermes" 
  } 
}

Giờ đây, ứng dụng của bạn được xây dựng bằng Dịch vụ ứng dụng Expo sẽ được kích hoạt Hermes làm công cụ JavaScript của nó.

Tối ưu hóa hiệu suất của Hermes cho các ứng dụng React Native

Hầu hết các công cụ JavaScript phân tích cú pháp tất cả mã nguồn JavaScript bằng hệ thống biên dịch JIT (Just in Time). Hệ thống JIT làm chậm quá trình thực thi vì thiết bị của bạn phải đợi toàn bộ quá trình biên dịch hoàn tất. Hermes sử dụng phương pháp biên dịch trước thời hạn (AOT), chuyển phần lớn công việc của engine JavaScript hạng nặng sang thời gian xây dựng.

Hermes chủ yếu ảnh hưởng đến ba số liệu về hiệu suất ứng dụng: TTI (Thời gian tương tác) của ứng dụng, kích thước nhị phân và mức sử dụng bộ nhớ.

Thời gian để tương tác

TTI là thời gian ứng dụng cần tải và hỗ trợ tương tác của người dùng như cuộn hoặc nhập. Hermes cải thiện TTI trung bình cho các ứng dụng React Native so với các công cụ JavaScript khác.

Việc giảm TTI này là do Hermes không chạy trình biên dịch JIT.

Kích thước nhị phân

Kích thước nhị phân là kích thước của ứng dụng React Native đi kèm. Các ứng dụng Android sử dụng Định dạng tệp APK , trong khi các ứng dụng iOS sử dụng định dạng mà Apple gọi là IPA. Sử dụng Hermes giúp giảm đáng kể kích thước ứng dụng trên thiết bị Android.

Sử dụng bộ nhớ

Sử dụng bộ nhớ là một số liệu quan trọng khác để tối ưu hóa trong các ứng dụng. Trải nghiệm người dùng của một ứng dụng sẽ bị ảnh hưởng tiêu cực nếu nó sử dụng quá nhiều bộ nhớ. Hermes triển khai hệ thống Garbage Collector điều chỉnh việc sử dụng bộ nhớ theo yêu cầu, đảm bảo một ứng dụng chỉ sử dụng không gian bộ nhớ cần thiết trong khi chạy.

Gỡ lỗi React Native với Hermes và Chrome DevTools

Hermes đi kèm với một trải nghiệm mới để gỡ lỗi các ứng dụng React Native chạy trên trình giả lập, trình mô phỏng hoặc thiết bị vật lý bằng Expo. Hermes hỗ trợ gỡ lỗi các ứng dụng React Native bằng Giao thức kiểm tra của Chrome DevTools. Bạn không nên nhầm lẫn điều này với truyền thống Gỡ lỗi JavaScript bằng bảng điều khiển của trình duyệt .

Để định cấu hình Chrome gỡ lỗi ứng dụng Hermes, hãy làm theo các bước sau.

Hướng đến chrome: // thanh tra bên trong trình duyệt Chrome của bạn.
Bấm vào Định cấu hình cái nút.
Bên trong phương thức trên màn hình, hãy nhập địa chỉ máy chủ cho gói phụ kiện đang chạy ứng dụng React Native của bạn và nhấp vào Xong .

Bây giờ bạn có thể gỡ lỗi ứng dụng React Native của mình bằng liên kết kiểm tra mục tiêu Hermes.

Tại sao Hermes được tối ưu hóa cho Chỉ React Native

Hiệu suất tối ưu của Hermes như một công cụ JavaScript React Native một phần phụ thuộc vào môi trường thời gian chạy của nó. Trong React Native, bạn gói tất cả mã JavaScript trong môi trường ứng dụng. Hệ thống này làm cho việc vận chuyển bytecode trở nên hiệu quả.

làm thế nào để trở thành một người đánh giá nho

Một yếu tố khác cần xem xét là số lượng công việc được thực hiện trong quá trình biên dịch JavaScript. Hermes quản lý sự tương tác thường xuyên của người dùng dự kiến đối với các ứng dụng di động trong khi tránh tối ưu hóa bytecode tích cực. Một công cụ JavaScript của trình biên dịch JIT sẽ không thực hiện các tác vụ theo cách này.