Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών.

Το React Native 0.70 έχει κυκλοφορήσει και το Hermes είναι η νέα προεπιλεγμένη μηχανή JavaScript που διατίθεται με αυτήν την ενημέρωση. Δείτε τι να περιμένετε από το Hermes και μερικά από τα χαρακτηριστικά που θα επηρεάσουν την απόδοση της εφαρμογής σας React Native.

Τι είναι ο Ερμής;

Το Hermes είναι μια μηχανή JavaScript ανοιχτού κώδικα που βελτιστοποιεί την απόδοση κατά τη διάρκεια iOS και Android Η εφαρμογή εκκινείται με προ-μεταγλώττιση κώδικα JavaScript σε αποδοτικό bytecode και μειώνοντας την εφαρμογή χρήση μνήμης.

Ενημέρωση παλαιότερων εγγενών εκδόσεων React για υποστήριξη του Hermes

Οι εφαρμογές React Native που εκτελούνται σε 0.70 θα έχουν ενεργοποιημένο το Hermes από προεπιλογή. Για παλαιότερες εφαρμογές React Native, μια έκδοση Hermes διατίθεται με κάθε έκδοση React Native που ξεκινά από την έκδοση 0.60.4 για εκδόσεις Android και την έκδοση 0.64.0 για iOS. Οι αντίστοιχες εκδόσεις εξαλείφουν τον κίνδυνο αναντιστοιχίας εξάρτησης στην εφαρμογή React Native.

instagram viewer

Για να ενεργοποιήσετε το Hermes σε αυτές τις παλαιότερες εκδόσεις του React Native, θα χρειαστεί να προσθέσετε κάποια διαμόρφωση στις εφαρμογές σας Android και iOS.

Σε Android, επεξεργαστείτε το δικό σας android/app/build.gradle αρχείο:

project.ext.react = [
 entryFile: "index.js",
 enableHermes: αληθής// καθαρίστε και ανακατασκευάστε εάν αλλάξετε
]

Στο iOS, κάνετε τις ακόλουθες αλλαγές στο δικό σας ios/Podfile:

use_react_native!(
: μονοπάτι => config[:reactNativePath],
 :hermes_enabled => αληθής
)

Το iOS απαιτεί να εγκαταστήσετε τα pods Hermes μετά τη διαμόρφωση των ρυθμίσεων.

Εκτελέστε την ακόλουθη εντολή για να εγκαταστήσετε τα pods:

cd ios && εγκατάσταση pod

Ενεργοποίηση Hermes With Expo

Μπορείτε επίσης να χρησιμοποιήσετε τη μηχανή Hermes για εφαρμογές React Native που έχουν δημιουργηθεί ή εκτελούνται με χρήση του Expo. Η βιβλιοθήκη Expo υποστηρίζει Hermes από την έκδοση SDK 42 σε Android και την έκδοση SDK 43 σε iOS έως την τρέχουσα έκδοση 0.70. Είναι σημαντικό να σημειωθεί ότι οι αυτόνομες εφαρμογές δεν μπορούν να εκτελούν το Hermes εκτός και αν δημιουργηθούν με χρήση του Expo Application Services Build.

Για να ενεργοποιήσετε το Hermes σε μια εφαρμογή React Native, επεξεργαστείτε το δικό σας app.json αρχείο:

{
"έκθεση": {
"jsEngine": "Ερμής"
 }
}

Τώρα η εφαρμογή σας που έχει κατασκευαστεί με τις Υπηρεσίες Εφαρμογών Expo θα έχει ενεργοποιημένο το Hermes ως μηχανή JavaScript.

Hermes Performance Optimization για React Native Apps

Οι περισσότερες μηχανές JavaScript αναλύουν όλο τον πηγαίο κώδικα JavaScript χρησιμοποιώντας ένα σύστημα μεταγλώττισης JIT (Just in Time). Το σύστημα JIT επιβραδύνει την εκτέλεση επειδή η συσκευή σας πρέπει να περιμένει να ολοκληρωθεί ολόκληρη η διαδικασία μεταγλώττισης. Η Hermes χρησιμοποιεί μια προσέγγιση μεταγλώττισης εκ των προτέρων (AOT), μεταφέροντας το μεγαλύτερο μέρος της εργασίας του κινητήρα JavaScript βαρέως τύπου για τη δημιουργία χρόνου.

Ο Hermes επηρεάζει κυρίως τρεις μετρήσεις απόδοσης της εφαρμογής: την εφαρμογή TTI (Time to Interactive), το δυαδικό μέγεθος και τη χρήση μνήμης.

Ώρα για διαδραστική

Το TTI είναι ο χρόνος που χρειάζεται μια εφαρμογή για να φορτώσει και να υποστηρίξει την αλληλεπίδραση με τον χρήστη, όπως κύλιση ή πληκτρολόγηση. Η Hermes βελτιώνει το μέσο TTI για εφαρμογές React Native σε σύγκριση με άλλες μηχανές JavaScript.

Αυτή η μείωση στο TTI οφείλεται στο ότι ο Hermes δεν εκτελεί μεταγλωττιστή JIT.

Δυαδικό μέγεθος

Το δυαδικό μέγεθος είναι το μέγεθος της ομαδοποιημένης εφαρμογής React Native. Οι εφαρμογές Android χρησιμοποιούν το Μορφή αρχείου APK, ενώ οι εφαρμογές iOS χρησιμοποιούν μια μορφή που η Apple καλεί IPA. Η χρήση του Hermes μειώνει σημαντικά το μέγεθος της εφαρμογής σε συσκευές Android.

Χρήση μνήμης

Η χρήση μνήμης είναι μια άλλη κρίσιμη μέτρηση για βελτιστοποίηση σε εφαρμογές. Η εμπειρία χρήστη μιας εφαρμογής θα επηρεαστεί αρνητικά εάν χρησιμοποιεί υπερβολική μνήμη. Η Hermes εφαρμόζει ένα σύστημα συλλογής σκουπιδιών που ρυθμίζει τη χρήση της μνήμης κατά παραγγελία, διασφαλίζοντας ότι μια εφαρμογή χρησιμοποιεί μόνο τον απαραίτητο χώρο μνήμης κατά την εκτέλεση.

Το Hermes έρχεται με μια νέα εμπειρία για τον εντοπισμό σφαλμάτων σε εφαρμογές React Native που εκτελούνται σε εξομοιωτή, προσομοιωτή ή φυσική συσκευή χρησιμοποιώντας το Expo. Η Hermes υποστηρίζει τον εντοπισμό σφαλμάτων σε εφαρμογές React Native χρησιμοποιώντας το Πρωτόκολλο Inspector του Chrome DevTools. Δεν πρέπει να το συγχέετε με το παραδοσιακό Εντοπισμός σφαλμάτων JavaScript με χρήση της κονσόλας του προγράμματος περιήγησης.

Για να διαμορφώσετε το Chrome για εντοπισμό σφαλμάτων σε εφαρμογές Hermes, ακολουθήστε αυτά τα βήματα.

  1. Πλοηγηθείτε στο chrome://inspect μέσα στο πρόγραμμα περιήγησής σας Chrome.
  2. Κάνε κλικ στο Διαμορφώστε κουμπί.
  3. Μέσα στο modal επί της οθόνης, εισαγάγετε τη διεύθυνση διακομιστή για το πακέτο metro που εκτελεί την εφαρμογή React Native και κάντε κλικ Εγινε.

Τώρα μπορείτε να διορθώσετε την εφαρμογή React Native χρησιμοποιώντας τον σύνδεσμο επιθεώρησης στόχου Hermes.

Γιατί ο Hermes είναι βελτιστοποιημένος μόνο για React Native

Η βέλτιστη απόδοση του Hermes ως μηχανή React Native JavaScript οφείλεται εν μέρει στο περιβάλλον χρόνου εκτέλεσης. Στο React Native, ομαδοποιείτε όλο τον κώδικα JavaScript στο περιβάλλον της εφαρμογής. Αυτό το σύστημα καθιστά αποτελεσματική την αποστολή bytecode.

Ένας άλλος παράγοντας που πρέπει να ληφθεί υπόψη είναι ο όγκος της εργασίας που γίνεται κατά τη μεταγλώττιση JavaScript. Η Hermes διαχειρίζεται τη συχνή αλληλεπίδραση με τον χρήστη που αναμένεται από τις εφαρμογές για κινητά, αποφεύγοντας ταυτόχρονα την επιθετική βελτιστοποίηση bytecode. Μια μηχανή JavaScript μεταγλωττιστή JIT δεν θα εκτελούσε εργασίες με αυτόν τον τρόπο.