นากกายสีมิ้นต์กำลังย้ายม้วนแผนที่ source map จากลังใหญ่ไปกล่องเล็กบนโต๊ะทำงานสว่าง
react-nativemobileperformancerelease

React Native 0.87: Metro ใช้แรมน้อยลงครึ่งหนึ่ง แต่ config เก่าต้องเก็บกวาด

พี่โชว์Engineering

แอปใหญ่ที่เปิด Metro แล้วเครื่องพัฒนาหอบอาจได้ประโยชน์ตรงกว่าฟีเจอร์หน้าจอใหม่ครับ React Native 0.87 ขยับ Metro จาก 0.84 เป็น 0.87 โดยทีมรายงานว่า source map เร็วขึ้นประมาณสองเท่าและใช้หน่วยความจำครึ่งหนึ่งจากการเก็บข้อมูลที่มีประสิทธิภาพขึ้น

WHY: แยกการวัด bundler ออกจาก migration อื่น

รุ่น 0.87 เปลี่ยนหลายแกนพร้อมกัน ทั้ง Strict TypeScript API, Node 22, AGP 9, Kotlin 2 และ SwiftPM ทดลอง ถ้าอัปทุกอย่างแล้ว build เร็วขึ้นหรือพัง เราจะไม่รู้ว่าเกิดจากชั้นใด ผมแนะนำเก็บ baseline ของ Metro ก่อน: cold start, incremental rebuild, peak RSS และเวลาที่ DevTools โหลด source map จากนั้นค่อยเทียบด้วย repository และเครื่องเดิม

Metro 0.87 รองรับ config แบบ TypeScript และ ESM อย่างเสถียร เช่น metro.config.mts แต่เลิกรองรับ YAML และนามสกุล .es6 การเปลี่ยนนามสกุลไม่พอ ต้องตรวจว่า config export รูปแบบที่ Metro โหลดจริง และ plugin ภายในทีมไม่พึ่ง CommonJS side effect โดยไม่ตั้งใจ

ตัวอย่างเป็นโครง static-only เพราะการตรวจจริงต้องมี React Native SDK และ Metro dependency ของโปรเจกต์ ซึ่ง automation รอบนี้ไม่ติดตั้งเพิ่ม

import { getDefaultConfig, mergeConfig } from "@react-native/metro-config";

const projectConfig = {
  resolver: {
    sourceExts: ["js", "jsx", "ts", "tsx"],
  },
};

export default mergeConfig(getDefaultConfig(import.meta.dirname), projectConfig);

โค้ดด้านบนเป็นตัวอย่าง config สำหรับตรวจรูปทรง API เท่านั้น ให้เทียบกับ template 0.87 ของโปรเจกต์จริงก่อนใช้ โดยเฉพาะค่า path และ export ที่เครื่องมือ migration สร้างให้

วิธี rollout ที่อ่านผลได้

ทำ branch แยกเฉพาะ dependency และ config ของ Metro รัน bundle เดิมสามครั้งแล้วใช้ค่ากลาง ตัด cache ก่อน cold run แต่เก็บ cache สำหรับ incremental run ถ้า peak RSS ลดแต่เวลา build เพิ่ม ให้ตรวจ source map setting และ transformer plugin ก่อนสรุปว่าตัวเลขจาก release note ใช้กับงานเราไม่ได้

เมื่อย้ายผ่านแล้วค่อยจัดการ Strict API และ native toolchain คนละ commit การแบ่งเช่นนี้ทำให้ rollback ได้และช่วย library owner รู้ว่าปัญหาอยู่ที่ JS bundler หรือ native build

Recap

  • Metro 0.87 รายงาน source map เร็วขึ้น 2 เท่าและใช้แรมครึ่งหนึ่ง
  • .mts รองรับเสถียร แต่ YAML กับ .es6 config ถูกถอด
  • วัด cold, incremental, RSS และ DevTools แยกกัน
  • อย่าปน migration Metro, TypeScript และ native toolchain ในก้าวเดียว