Metro: τι είναι, βασικές δυνατότητες και αρχή λειτουργίας

Τι είναι το Metro;

Metro είναι ένας bundler JavaScript ανοικτού κώδικα, που δημιουργήθηκε από την ομάδα Meta για React Native. Αντικατέστησε το Packager από προηγούμενες εκδόσεις του React Native και έγινε το τυπικό εργαλείο μεταγλώττισης για αυτήν την πλατφόρμα. Το Metro δεν προορίζεται για ανάπτυξη ιστού: η αρχιτεκτονική του είναι εστιασμένη αποκλειστικά σε εφαρμογές κινητού που λειτουργούν υπό τα JSC (JavaScriptCore) ή Hermes JavaScript engines.

Ιστορία δημιουργίας και θέση

Metro εμφανίστηκε το 2018 ως αντικατάσταση του παλιού React Native Packager. Ο κύριος λόγος δημιουργίας ήταν η ανάγκη για έναν bundler που λειτουργεί αποτελεσματικά με εκατομμύρια μονάδων σε μεγάλες εφαρμογές κινητού. Σε αντίθεση με το Webpack, το Metro δεν υποστηρίζει CSS, HTML ή εικόνες ως μονάδες — αυτοί οι πόροι επεξεργάζονται από ξεχωριστά εργαλεία React Native. Το Facebook χρησιμοποιεί το Metro για τη μεταγλώττιση της κύριας εφαρμογής του, η οποία περιέχει πάνω από 100 χιλιάδες αρχεία.

Το Metro διανέμεται μέσω npm ως πακέτο metro και εγκαθίσταται αυτόματα μαζί με το React Native CLI. Η έκδοση του Metro είναι συνδεδεμένη με την έκδοση του React Native, επομένως η ενημέρωση του bundler γίνεται μαζί με την ενημέρωση της πλατφόρμας.

Πώς λειτουργεί ο bundler Metro;

Metro λαμβάνει ως είσοδο το σημείο εισόδου της εφαρμογής, κατασκευάζει ένα γράφημα εξαρτήσεων, μετασχηματίζει κάθε μονάδα και σειριοποιεί το αποτέλεσμα σε ένα ενιαίο bundle. Η διαδικασία διερχεται τρεις φάσεις: Resolve (επίλυση μονάδων), Transform (μετασχηματισμός) και Serialize (σειριοποίηση).

Διαδικασία μεταγλώττισης στο Metro

// Παράδειγμα ρύθμισης Metro για προσαρμοσμένη μετασχηματισμό
const metroConfig = {
  transformer: {
    babelTransformerPath: require('metro-babel-transformer'),
    async transform({ src, filename, options }) {
      const result = await babelTransform({ src, filename, options });
      return {
        ast: result.ast,
        code: result.code,
        map: result.map,
        dependencies: [],
      };
    },
  },
  serializer: {
    createModuleIdFactory() {
      let nextId = 0;
      const moduleIds = new Map();
      return ({ path }) => {
        if (!moduleIds.has(path)) {
          moduleIds.set(path, nextId++);
        }
        return moduleIds.get(path);
      };
    },
  },
};

Στη φάση Resolve, το Metro καθορίζει τη θέση κάθε εισαγόμενης μονάδας, λαμβάνοντας υπόψη τα aliases και τα node_modules. Στη φάση Transform, κάθε αρχείο περνάει από έναν Babel transformer για τη μετατροπή JSX, TypeScript και άλλων επεκτάσεων σε καθαρό JavaScript. Η τελική φάση Serialize συλλέγει όλες τις μετασχηματισμένες μονάδες σέ ένα ή περισσότερα αρχεία bundle.

Αρχιτεκτονική του Metro

Metro είναι κατασκευασμένο πάνω σε αρχιτεκτονική βάση μονάδων, όπου κάθε στάδιο μεταγλώττισης υλοποιείται ως ξεχωριστό στοιχείο. Αυτό επιτρέπει την αντικατάσταση των τυπικών μονάδων με προσαρμοσμένες χωρίς τροποποίηση του πυρήνα του bundler. Η αρχιτεκτονική του Metro περιλαμβάνει τρία κύρια πακέτα: metro, metro-config και metro-resolver.

Βασικά στοιχεία του Metro

Metro Server — διακομιστής ανάπτυξης που εκκινά με την εντολή npx react-native start. Εξυπηρετεί αιτήματα μετασχηματισμού μονάδων σε πραγματικό χρόνο, παρέχοντας Fast Refresh. Module Store — κατάχηση που αποθηκεύει τις μετασχηματισμένες μονάδες στη μνήμη για να επιταχύνει τις επαναληπτικές μεταγλώττισεις. Dependency Graph — γράφημα εξαρτήσεων που ενημερώνεται αυξητικά καθώς αλλάζονται τα αρχεία.

Watchman — παρακολουθητής αρχείων από τη Meta που χρησιμοποιεί το Metro για την ανίχνευση αλλαγών στο σύστημα αρχείων. Χωρίς Watchman, το Metro θα πρέπει να σαρώνει ξανά όλη τη δομή αρχείων σε κάθε αλλαγή, πράγμα που επιβραδύνει σημαντικά την ανάπτυξη. Η εγκατάσταση του Watchman είναι υποχρεωτική για άνετη εργασία με το Metro σε έργα οποιουδήποτε μεγέθους.

Ρύθμιση του Metro σε έργο React Native

Ρύθμιση Το Metro ορίζεται στο αρχείο metro.config.js στην ρίζα του έργου. Ένα τυπικό αρχείο καθορίζει επιπλέον φακέλους για την αναζήτηση μονάδων, φράγματα για τον αποκλεισμό αχρήστων αρχείων και προσαρμοσμένους transformers. Στο React Native 0.72+ χρησιμοποιείται αυτόματη ανίχνευση ρύθμισης, αλλά για μονοαποθήκες η ρύθμιση είναι υποχρεωτική.

Βασική ρύθμιση Metro για React Native

// metro.config.js
const config = {
  resolver: {
    sourceExts: ['js', 'jsx', 'ts', 'tsx', 'json'],
    nodeModulesPaths: ['node_modules'],
    blockList: [/\.test\.js$/, /__tests__\/.*/],
    extraNodeModules: {
      'shared-components': path.resolve(__dirname, '../shared/src'),
    },
  },
  transformer: {
    minifierConfig: {
      keep_classnames: true,
      keep_fnames: true,
      mangle: { reserved: ['React', 'Component'] },
    },
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

blockList αποκλείει αρχεία δοκιμής από τη μεταγλώττιση, μειώνοντας το μέγεθος του bundle. nodeModulesPaths υποδεικνύει επιπλέον διαδρομές για την αναζήτηση πακέτων — κρίσιμο για μονοαποθήκες. extraNodeModules δημιουργεί aliases για κοινά πακέτα που χρησιμοποιούνται σε διαφορετικά έργα της μονοαποθήκης.

Βελτιστοποίηση μεταγλώττισης Metro

Metro παρέχει αρκετούς μηχανισμούς για τη βελτιστοποίηση του μεγέθους του bundle και της ταχύτητας μεταγλώττισης. Inline Requires — η πιο αποτελεσματική τεχνική, μετατρέποντας τα imports στο υψηλότερο επίπεδο σε τοπικά require μέσα σε συναρτήσεις. RAM bundles επιτρέπουν την αυξητική φόρτωση μονάδων. Hermes μεταγλωττίζει το JavaScript σε bytecode, μειώνοντας το μέγεθος της εφαρμογής κατά 20–30%.

Ενεργοποίηση Inline Requires και Hermes

// metro.config.js — βελτιστοποίηση για παραγωγή
const config = {
  transformer: {
    async transform({ src, filename, options }) {
      const inlineRequires = options.dev ? false : true;
      return await defaultTransform({ src, filename, options: { ...options, inlineRequires } });
    },
  },
  serializer: {
    polyfillModuleNames: [],
  },
};

// Για ενεργοποίηση Hermes — στο build.gradle (Android):
// project.ext.react = [enableHermes: true, bundleInRelease: true]
// Για iOS — στο Podfile: :hermes_enabled => true

Για τη διαγνωστική του μεγέθους του bundle, το Metro παρέχει τη σημαία --bundle-output με στατιστική έξοδο. Χρησιμοποιήστε το bundle-visualizer για ανάλυση της σύνθεσης του bundle και εύρεση μεγάλων μονάδων που μπορούν να φορτωθούν αργά. Ο τακτικός έλεγχος του μεγέθους του bundle πρέπει να αποτελεί μέρος του αγωγού CI/CD του έργου React Native.

Delta Bundles και αυξητική μεταγλώττιση

Metro υποστηρίζει delta-bundles — έναν μηχανισμό όπου μετά την πρώτη πλήρη μεταγλώττιση, ο διακομιστής στέλνει μόνο τις αλλαγές (delta) μεταξύ της παλιάς και της νέας έκδοσης του bundle. Αυτό επιταχύνει δραστικά τις επακόλουθες μεταγλώττισεις: ο χρόνος ενημέρωσης μειώνεται από δευτερόλεπτα σε δεκάδες χιλιοστά δευτερολέπτου. Τα delta-bundles είναι ιδιαίτερα αποτελεσματικά στο στάδιο ανάπτυξης, όταν ο δημιουργός συχνά αποθηκεύει αλλαγές και επαναφορτώνει την εφαρμογή.

Για την ενεργοποίηση των delta-bundles στο React Native, χρησιμοποιείται η σημαία --delta στην εντολή npx react-native bundle. Από την πλευρά του πελάτη, τα delta-bundles υποστηρίζονται από τη React Native 0.64 και μετά. Σε μεταγλώττισεις παραγωγής, τα delta-bundles δεν εφαρμόζονται — αντί αυτών χρησιμοποιείται ένα πλήρες bundle με Hermes bytecode για μέγιστη απόδοση κατά την εκκίνηση. Αυτό επιτυγχάνεται επειδή η αύξηση της ταχύτητας ανάπτυξης αντισταθμίζει το κόστος της πρώτης πλήρους μεταγλώττισης.

Hermes και Metro: συνεργασία

Hermes — μηχανή JavaScript που αναπτύχθηκε από τη Meta ειδικά για React Native. Το Metro δημιουργεί Hermes bytecode στο στάδιο μεταγλώττισης, επιτρέποντας στην εφαρμογή να εκκινήσει χωρίς την δαπανηρή μεταγλώττιση JavaScript στη συσκευή. Για την ενεργοποίηση του Hermes, αρκεί να προσθέσετε enableHermes: true στο metro.config.js και να ρυθμίσετε το build.gradle ή το Podfile. Το Hermes μειώνει τον χρόνο εκκίνησης της εφαρμογής κατά 30–50% και το μέγεθος APK κατά 20–30% σε σύγκριση με το JavaScriptCore.

Κατά τη χρήση του Hermes, είναι σημαντικό να θυμάστε τις περιορισμούς: η μηχανή δεν υποστηρίζει Proxy, Reflect και ορισμένες δυνατότητες ES6. Οι περισσότερες εφαρμογές React Native δεν χρησιμοποιούν αυτές τις δυνατότητες άμεσα, αλλά ορισμένες βιβλιοθήκες μπορούν να προκαλέσουν συγκρούσεις. Πριν ενεργοποιήσετε το Hermes, ελέγξτε τη συμβατότητα όλων των εξαρτήσεων του έργου μέσω της επίσημης λίστας ελέγχου συμβατότητας. Το Metro μεταβαίνει αυτόματα σε λειτουργία δημιουργίας bytecode κατά την ενεργοποίηση του Hermes.

Παρακολούθηση απόδοσης Metro

Για την παρακολούθηση της αποτελεσματικότητας της μεταγλώττισης Metro, χρησιμοποιήστε τις ενσωματωμένες μετρικές που είναι διαθέσιμες μέσω του Flipper — του εργαλείου εντοπισμού σφαλμάτων React Native