ನೀವು ಐಕಾನ್ ಲೈಬ್ರರಿಗಳನ್ನು ಏಕೆ ಬದಲಾಯಿಸಬೇಕು
@expo/vector-icons ನಿಂದ ಅಧಿಕೃತ @react-native-vector-icons ಪ್ಯಾಕೇಜ್ಗಳಿಗೆ ಬದಲಾಯಿಸುವುದರಿಂದ ನಿಮ್ಮ ಬಂಡಲ್ ಗಾತ್ರವು (bundle size) 4MB ಅಥವಾ ಅದಕ್ಕಿಂತ ಹೆಚ್ಚು ಕಡಿಮೆಯಾಗುತ್ತದೆ. Expo ಈಗ ಈ ಬದಲಾವಣೆಯನ್ನು ಶಿಫಾರಸು ಮಾಡುತ್ತದೆ.
ಹಳೆಯ @expo/vector-icons ಒಂದು wrapper ಆಗಿತ್ತು. ಇದು ಐಕಾನ್ಗಳು Expo Go ಮತ್ತು over-the-air ಅಪ್ಡೇಟ್ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತಿತ್ತು. ಆದರೆ, ಈ wrapper ಸಂಕೀರ್ಣತೆಯನ್ನು ಹೆಚ್ಚಿಸಿತು. ಇದನ್ನು ಕೆಲಸ ಮಾಡುವಂತೆ ಮಾಡಲು Expo Babel transforms ಅನ್ನು ಬಳಸಬೇಕಾಯಿತು. ಇದು ಹೆಚ್ಚಿನ ನಿರ್ವಹಣಾ ಕೆಲಸವನ್ನು (maintenance work) ಸೃಷ್ಟಿಸಿತು.
ಹೊಸ ಪ್ಯಾಕೇಜ್ಗಳು ವಿಭಿನ್ನವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ. ಅವು ನೇರವಾಗಿ expo-font ನೊಂದಿಗೆ ಸಂಯೋಜನೆಗೊಳ್ಳುತ್ತವೆ (integrate). ಅವು native font loading APIs ಅನ್ನು ಬಳಸುತ್ತವೆ. ಇದರರ್ಥ ಅವು Expo Go, development builds ಮತ್ತು production apps ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ.
ಬದಲಾಯಿಸುವುದರಿಂದ ಆಗುವ ಪ್ರಯೋಜನಗಳು:
- ಸಣ್ಣ ಬಂಡಲ್ಗಳು: ಇಂಪೋರ್ಟ್ಗಳನ್ನು (imports) ಬದಲಾಯಿಸಿದ ನಂತರ ನಮ್ಮ ಟೆಸ್ಟ್ ಆಪ್ 4MB ಕಡಿಮೆಯಾಯಿತು.
- ಹೊಸ ಐಕಾನ್ ಸೆಟ್ಗಳು: ನಿಮಗೆ Lucide ನಂತಹ ಸೆಟ್ಗಳ ಪ್ರವೇಶ ಸಿಗುತ್ತದೆ.
- ಉತ್ತಮ ಪರಿಕರಗಳು: ನೀವು ಐಕಾನ್ ಹೆಸರುಗಳನ್ನು type-check ಮಾಡಬಹುದು.
- ಸುಲಭವಾದ ಸೆಟಪ್: ನಿಮಗೆ ಇನ್ನು ಮುಂದೆ ಸಂಕೀರ್ಣವಾದ aliasing configurations ಅಗತ್ಯವಿಲ್ಲ.
ಮೈಗ್ರೇಟ್ ಮಾಡುವುದು ಹೇಗೆ:
- codemod ಅನ್ನು ರನ್ ಮಾಡಿ: ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ರೂಟ್ನಲ್ಲಿ
npx @react-native-vector-icons/codemodಬಳಸಿ. - ಬದಲಾವಣೆಯನ್ನು ಪರಿಶೀಲಿಸಿ: ಹಳೆಯ ಪ್ಯಾಕೇಜ್ಗಳನ್ನು ಕಂಡುಹಿಡಿಯಲು
npx expo doctorರನ್ ಮಾಡಿ. - expo-font ಅನ್ನು ಪರಿಶೀಲಿಸಿ: ಅದು ಇನ್ಸ್ಟಾಲ್ ಆಗಿದೆಯೇ ಮತ್ತು ಕಾನ್ಫಿಗರ್ ಆಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. node_modules ನಿಂದ ಫಾಂಟ್ ಪಾತ್ಗಳನ್ನು (font paths) ನೇರವಾಗಿ ಕಾನ್ಫಿಗರೇಶನ್ ಪ್ಲಗಿನ್ಗೆ ಸೇರಿಸಬೇಡಿ.
ಈ ಸಮಸ್ಯೆಗಳ ಬಗ್ಗೆ ಎಚ್ಚರವಿರಲಿ:
- ಫಾಂಟ್ ಸಂಘರ್ಷಗಳು: ಹಳೆಯ ಮತ್ತು ಹೊಸ ಪ್ಯಾಕೇಜ್ಗಳನ್ನು ಬೆರೆಸುವುದರಿಂದ ಖಾಲಿ ಚೌಕಟ್ಟುಗಳು ಅಥವಾ ಪ್ರಶ್ನಾರ್ಥಕ ಚಿಹ್ನೆಗಳು ಕಾಣಿಸಿಕೊಳ್ಳಬಹುದು.
- ಅವಲಂಬನೆ ಸಮಸ್ಯೆಗಳು: ಕೆಲವು ಲೈಬ್ರರಿಗಳು ಹಳೆಯ ಹೆಸರುಗಳನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತವೆ. ನೀವು ದೋಷಗಳನ್ನು (errors) ನೋಡಿದರೆ ನಿಮ್ಮ dependencies ಅನ್ನು ಪರಿಶೀಲಿಸಿ.
Expo ಮುಂದಿನ ಬಿಡುಗಡೆಯಲ್ಲಿ @expo/vector-icons ಅನ್ನು ಕೈಬಿಡಲಿದೆ (deprecate). ಈಗಲೇ ಈ ಬದಲಾವಣೆಯನ್ನು ಮಾಡಿಕೊಳ್ಳುವುದು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು (performance) ಸುಧಾರಿಸುತ್ತದೆ.
ಮೂಲ: https://dev.to/expo/why-you-should-drop-expovector-icons-for-react-native-vector-icons-3m1n