Metro: ความหมาย ความสามารถหลัก และหลักการทำงาน

Metro คืออะไร?

Metro คือบัณเดลอร์ JavaScript โอเพนซอร์สที่สร้างขึ้นโดยทีม Meta สำหรับ React Native มันแทนที่ Packager จากเวอร์ชันแรกๆ ของ React Native และกลายเป็นเครื่องมือบิลด์มาตรฐานสำหรับแพลตฟอร์มนี้ Metro ไม่ได้ออกแบบมาสำหรับการพัฒนาเว็บ: สถาปัตยกรรมของมันมุ่งเน้นไปที่แอปพลิเคชันมือถือที่ทำงานบนเอนจิน JavaScript JSC (JavaScriptCore) หรือ Hermes เท่านั้น

ประวัติการสร้างและการวางตำแหน่ง

Metro ปรากฏในปี 2018 เพื่อแทนที่ React Native Packager เดิม เหตุผลหลักในการสร้างคือความต้องการบัณเดลอร์ที่ทำงานได้อย่างมีประสิทธิภาพกับโมดูลนับล้านในแอปพลิเคชันมือถือขนาดใหญ่ แตกต่างจาก Webpack Metro ไม่รองรับ CSS, HTML หรือรูปภาพเป็นโมดูล — ทรัพยากรเหล่านี้ถูกจัดการโดยเครื่องมือ React Native ที่แยกต่างหาก Facebook ใช้ Metro เพื่อสร้างแอปพลิเคชันหลักซึ่งมีไฟล์มากกว่า 100,000 ไฟล์

Metro เผยแพร่ผ่าน npm เป็นแพ็กเกจ metro และติดตั้งโดยอัตโนมัติพร้อมกับ React Native CLI เวอร์ชันของ Metro เชื่อมโยงกับเวอร์ชันของ React Native ดังนั้นการอัปเดตบัณเดลอร์จึงเกิดขึ้นพร้อมกับการอัปเดตแพลตฟอร์ม

บัณเดลอร์ Metro ทำงานอย่างไร?

Metro รับจุดเริ่มต้นของแอปพลิเคชันเป็นอินพุต สร้างกราฟการพึ่งพา แปลงแต่ละโมดูล และทำให้ผลลัพธ์เป็นอนุกรมเป็นบัณเดลเดียว กระบวนการผ่านสามเฟส: 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 จะกำหนดตำแหน่งของแต่ละโมดูลที่นำเข้า โดยพิจารณาจากนามแฝงและ node_modules ในเฟส Transform แต่ละไฟล์จะผ่านตัวแปลง Babel เพื่อแปลง JSX, TypeScript และส่วนขยายอื่นๆ เป็น JavaScript บริสุทธิ์ เฟสสุดท้าย Serialize จะรวบรวมโมดูลที่แปลงแล้วทั้งหมดเป็นไฟล์บัณเดลหนึ่งไฟล์หรือมากกว่า

สถาปัตยกรรมของ Metro

Metro สร้างขึ้นบนสถาปัตยกรรมแบบโมดูลาร์ซึ่งแต่ละขั้นตอนการบิลด์ถูกนำไปใช้เป็นคอมโพเนนต์ที่แยกจากกัน ซึ่งอนุญาตให้แทนที่โมดูลมาตรฐานด้วยโมดูลที่กำหนดเองได้โดยไม่ต้องเปลี่ยนแกนหลักของบัณเดลอร์ สถาปัตยกรรมของ 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 ในรูทของโปรเจกต์ ไฟล์ทั่วไปจะกำหนดโฟลเดอร์เพิ่มเติมสำหรับค้นหาโมดูล รายการบล็อกเพื่อแยกไฟล์ที่ไม่จำเป็น และตัวแปลงที่กำหนดเอง ใน 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 แยกไฟล์ทดสอบออกจากการบิลด์ ช่วยลดขนาดบัณเดล nodeModulesPaths ระบุเส้นทางเพิ่มเติมสำหรับค้นหาแพ็กเกจ — สำคัญสำหรับโมโนรีโป extraNodeModules สร้างนามแฝงสำหรับแพ็กเกจที่ใช้ร่วมกันในโปรเจกต์ต่างๆ ภายในโมโนรีโป

การเพิ่มประสิทธิภาพการบิลด์ Metro

Metro มีกลไกหลายอย่างสำหรับเพิ่มประสิทธิภาพขนาดบัณเดลและความเร็วในการบิลด์ Inline Requires — เทคนิคที่มีประสิทธิภาพที่สุด แปลงการนำเข้าในระดับบนสุดเป็นการเรียก require ในเครื่องภายในฟังก์ชัน RAM bundles อนุญาตให้โหลดโมดูลแบบเพิ่มหน่วย Hermes คอมไพล์ JavaScript เป็นไบต์โค้ด ลดขนาดแอปพลิเคชันลง 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

สำหรับการวินิจฉัยขนาดบัณเดล Metro มีแฟล็ก --bundle-output พร้อมเอาต์พุตสถิติ ใช้ bundle-visualizer เพื่อวิเคราะห์องค์ประกอบของบัณเดลและค้นหาโมดูลขนาดใหญ่ที่สามารถโหลดแบบขี้เกียจได้ การตรวจสอบขนาดบัณเดลเป็นประจำควรเป็นส่วนหนึ่งของไปป์ไลน์ CI/CD ของโปรเจกต์ React Native

เดลต้าบัณเดลและการบิลด์แบบเพิ่มหน่วย

Metro รองรับเดลต้าบัณเดล — กลไกที่หลังจากบิลด์เต็มครั้งแรก เซิร์ฟเวอร์จะส่งเฉพาะการเปลี่ยนแปลง (เดลต้า) ระหว่างเวอร์ชันเก่าและใหม่ของบัณเดล ซึ่งช่วยเร่งการบิลด์ครั้งต่อๆ ไปอย่างมาก: เวลาอัปเดตลดลงจากวินาทีเหลือเพียงสิบมิลลิวินาที เดลต้าบัณเดลมีประสิทธิภาพโดยเฉพาะในช่วงการพัฒนา เมื่อนักพัฒนาบันทึกการเปลี่ยนแปลงบ่อยครั้งและโหลดแอปพลิเคชันใหม่

ในการเปิดใช้งานเดลต้าบัณเดลใน React Native ให้ใช้แฟล็ก --delta ในคำสั่ง npx react-native bundle ฝั่งไคลเอ็นต์ เดลต้าบัณเดลรองรับตั้งแต่ React Native 0.64 ในการบิลด์สำหรับโปรดักชัน จะไม่ใช้เดลต้าบัณเดล — แต่จะใช้บัณเดลเต็มรูปแบบกับไบต์โค้ด Hermes เพื่อประสิทธิภาพการเริ่มต้นสูงสุด ซึ่งเป็นไปได้เพราะความเร็วในการพัฒนาที่เพิ่มขึ้นชดเชยต้นทุนของการบิลด์เต็มครั้งแรก

Hermes และ Metro: การทำงานร่วมกัน

Hermes คือเอนจิน JavaScript ที่พัฒนาโดย Meta สำหรับ React Native โดยเฉพาะ Metro สร้างไบต์โค้ด Hermes ในขั้นตอนการบิลด์ ทำให้แอปพลิเคชันสามารถเริ่มทำงานได้โดยไม่ต้องคอมไพล์ 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 จะสลับไปยังโหมดสร้างไบต์โค้ดโดยอัตโนมัติเมื่อ Hermes ถูกเปิดใช้งาน

การตรวจสอบประสิทธิภาพของ Metro

ในการติดตามประสิทธิภาพการบิลด์ของ Metro ให้ใช้เมตริกในตัวที่มีให้ผ่าน Flipper — เครื่องมือดีบัก React Metro เผยแพร่อีเวนต์: bundle_request, transform, resolve พร้อมเวลาดำเนินการของแต่ละขั้นตอน การวิเคราะห์ข้อมูลนี้ช่วยระบุคอขวด: หากเฟส transform ใช้เวลามากกว่า 70% ปัญหาอยู่ที่ตัวแปลง Babel เปิดใช้งานการบันทึก Metro ผ่านแฟล็ก --verbose สำหรับการวินิจฉัยโดยละเอียด