ทำไมคุณควรเปลี่ยนไลบรารีไอคอน
การเปลี่ยนจาก @expo/vector-icons ไปใช้แพ็กเกจ @react-native-vector-icons อย่างเป็นทางการ จะช่วยลดขนาด bundle ของคุณลงได้ตั้งแต่ 4MB หรือมากกว่านั้น ซึ่งตอนนี้ Expo แนะนำให้ทำการเปลี่ยนแปลงนี้
@expo/vector-icons แบบเดิมนั้นเป็น wrapper ซึ่งช่วยให้ไอคอนทำงานร่วมกับ Expo Go และการอัปเดตแบบ over-the-air ได้ อย่างไรก็ตาม wrapper นี้เพิ่มความซับซ้อน โดย Expo ต้องใช้ Babel transforms เพื่อให้มันทำงานได้ ซึ่งทำให้เกิดภาระในการดูแลรักษาเพิ่มเติม
แพ็กเกจใหม่ทำงานแตกต่างออกไป โดยจะรวมเข้ากับ expo-font โดยตรง และใช้ native font loading APIs ซึ่งหมายความว่าจะสามารถใช้งานได้ทั้งใน Expo Go, development builds และแอปพลิเคชันบน production
ประโยชน์ของการเปลี่ยน:
- ขนาด bundle เล็กลง: แอปทดสอบของเรามีขนาดลดลง 4MB หลังจากเปลี่ยนการ import
- ชุดไอคอนที่ใหม่กว่า: คุณสามารถเข้าถึงชุดไอคอนอย่าง Lucide ได้
- เครื่องมือที่ดีกว่า: คุณสามารถทำ type-check ชื่อไอคอนได้
- การตั้งค่าที่สะอาดขึ้น: คุณไม่จำเป็นต้องตั้งค่าการทำ aliasing ที่ซับซ้อนอีกต่อไป
วิธีเปลี่ยน:
- รัน codemod: ใช้
npx @react-native-vector-icons/codemodใน root ของโปรเจกต์ - ตรวจสอบการเปลี่ยนแปลง: รัน
npx expo doctorเพื่อค้นหาแพ็กเกจเก่า - ตรวจสอบ expo-font: ตรวจสอบให้แน่ใจว่ามีการติดตั้งและตั้งค่าเรียบร้อยแล้ว ห้ามเพิ่ม font paths จาก node_modules ลงใน config plugin โดยตรง
สิ่งที่ควรระวัง:
- ความขัดแย้งของฟอนต์ (Font conflicts): การใช้แพ็กเกจเก่าและใหม่ปนกันจะทำให้เกิดช่องว่างสี่เหลี่ยมหรือเครื่องหมายคำถาม
- ปัญหาเรื่อง dependency: ไลบรารีบางตัวอาจคาดหวังชื่อแบบเก่า หากคุณพบข้อผิดพลาด ให้ตรวจสอบ dependencies ของคุณ
Expo จะยกเลิกการใช้งาน (deprecate) @expo/vector-icons ในเวอร์ชันในอนาคต การเปลี่ยนตอนนี้จะช่วยให้โปรเจกต์ของคุณจัดการได้ง่ายขึ้นและเพิ่มประสิทธิภาพการทำงาน
ที่มา: https://dev.to/expo/why-you-should-drop-expovector-icons-for-react-native-vector-icons-3m1n