분류 Reactjs

React Native 앱 최적화 시작하기

컨텐츠 정보

  • 조회 371 (작성일 )

본문

저는 1 년 동안 가장 큰 은행 모바일 앱 성능을 최적화 하기 위해 노력했습니다. 우리는 천천히 Huawei P20 Lite에서 14 초 TTI에서 약 2.5 초로 그것을 얻었습니다. 시작하기 전에 알고 싶은 것이 있습니다!


0. 몬스터 찾기 


최적화의 일반적인 실수는 한 번에 모든 것에 집중하는 것입니다. 느린 안드로이드 폰에 손을 대고, 앱을 설치하고, 완전한 테스트 실행을 하고, 고속도로 기능을 식별하십시오. 어떤 경로가 성능이 경험의 중요한 부분입니까?


https://blog.usejournal.com/getting-started-optimizing-a-react-native-app-1d7507c2d849 

  • 모든 애니메이션을 제거해보십시오. 앱은 어떻게 실행됩니까?
  • 데이터를 가져 오지 않은 상태에서 컴포넌트를 렌더링 해보십시오. 여전히 느립니다?
  • 구성 요소를 모두 제거해보십시오. 렌더링 시간이 크게 개선되고 있습니까?

데이터를 가져올 때, 새 구성 요소가 언제 트리에 렌더링 되는지 정확하게 렌더링 하는 방법을 파악하십시오. 앱의 속도 저하 원인을 파악하면 해결하기가 훨씬 쉬워집니다.


1. 다시 측정, 측정 및 측정 


최적화를 수행 할 때마다 변경 사항을 테스트하고 측정하십시오. 어떻게 수행합니까? 스톱 워치를 사용하고, 반응 네이티브 디버거 또는 전체 세 번째 다른 도구를 사용하십시오. 기본 성능에 반응 할 때 은총 알이 없으므로 케이스가 매우 다양하므로 케이스 전후에 측정하는 것이 절대적으로 중요합니다.


관심이 있다면 더 일찍 이것에 대해 더 긴 기사를 썼습니다


2. 번들 시각화 


1*hPDgWKK25jtFgN8pAd_rMg.png 


react-native-bundle-visualizer는 번들 크기를 조사하는 데 유용한 도구입니다. 마침내 앱의 전체 그림을 보았을 때 사용하는 '아하'순간이 많이 있었습니다. 이름에서 알 수 있듯이 앱 번들을 빌드하므로 번들의 크기와 크기가 다른 구성 요소 및 노드 모듈에 어떻게 퍼져 있는지 정확하게 시각화 할 수 있습니다. 여기에 눈에 띄는 것이 있습니까? 앱 번들 크기의 6%를 차지하는 순간이 정말로 필요합니까?


3. 필요할 때 필요한 것만 로드 


필요에 따라 영역 또는 종속성을 동적으로 가져 오기 


이것은 시간을 시작하기 위해 할 수 있는 가장 큰 개선 중 하나입니다. 반응하는 방식보다 훨씬 복잡하지만 그만한 가치가 있는 것 중 하나입니다. 내 오래된 프로젝트에서 우리가 찾을 수 있는 가장 느린 안드로이드 장치에서 시작 시간이 14 초에서 4 초로 줄었습니다.


페이스 북은 퍼포먼스에 대한 네이티브 포스트를 반응 시키는 것이 이것에 대한 최고의 리소스 중 하나입니다.


사용자에게 중요하지 않은 것을 지연 


페이스 북이나 인스타 그램과 같은 앱 에서이 효과를 많이 볼 수 있으며 최소한으로 로드 한 다음 점점 더 많이 로드합니다. 즉, 데이터 페치 및 무거운 구성 요소, 장치가 엄청나게 빠르며 인식 된 성능은 가장 중요한 것을 먼저 로드하는 것입니다. 여기에 확실한 가이드가 있습니다.


4. 자산 최적화 및 표준화 


0*xk1XFolecRpo00Sb.png 


React Native 앱에서 자산을 최적화 하면 적은 노력으로 큰 성능 향상을 달성 할 수 있는 쉬운 방법을 제공합니다.


왜? 특히 애셋을 만들 때 다양한 내보내기 설정을 사용하는 여러 디자이너와 작업하는 경우 PNG가 동등하게 생성되지 않습니다.


ImageOptim과 같은 소프트웨어를 사용하거나 이와 같은 작업을 전체 프로세스를 자동화 할 수 있습니다.


5. 인식된 성능을 수용 


0*2drhe1aX1TXQ5kxd.gif 


성능은 실행 시간 뿐만 아니라 결국 원하는 빠른 앱 경험의 느낌입니다. 인식 된 성능은 앱이 더 빠르고 더 잘 실행되는 것처럼 보이도록 하기 위한 모든 트릭입니다. 모든 자바 스크립트가 로드 될 때까지 스플래시 화면을 유지하거나 반응 네이티브 쉬머를 사용하여 사용자가 로드 된 내용을 사용자가 볼 수 있도록 하는 것과 같은 것들.


6. 가능한 한 많은 오픈 소스를 활용하고 최신 상태로 유지하십시오 


내가 주요 IT 회사에서 개발 한 것을 깨달은 것 중 하나는 우리가 거기서 큰 오픈 소스 프로젝트를 능가 할 수 없다는 것입니다. 수천 명의 기고자가 있으며 개발자 간의 장치 및 지식 범위는 종종 회사 나 팀이 제공하는 것보다 훨씬 큽니다.


React Native 커뮤니티의 초점은 지난 2 년 동안 일반적으로 앱 성능에 초점을 두었으며, 특히 React Native 핵심 팀은 0.59 (New JSC) 및 0.60.2 (Hermes 소개)에서 큰 발걸음을 내딛었습니다.


7. 애니메이션 재작성 


0*cyYzpLk2FN7vyIYc.jpg 


게으른 애니메이션처럼 "느린 앱"은 사용자에게 비명을 지르지 않습니다. 애니메이션은 JS 스레드에서 큰 성능을 발휘할 수 있습니다. 대신 네이티브 스레드를 사용하도록 다시 작성하면 큰 차이가 생길 수 있습니다. useNativeDriver : true 세트를 사용하여 Animated의 제한된 하위 세트를 사용하면 거의 모든 애니메이션을 구현할 수 있습니다.이 모든 것이 구현에 영리합니다.


8. 나중에 마이크로 최적화를 피하십시오 


그들은 종종 진짜 범인이 아닙니다. 불필요한 인라인 함수 등을 다시 작성하기 전에 더 큰 그림에 초점을 맞추십시오.


9. 재미있게 보내세요! 


1*qMNB9dZ2SSuct02okjOAbQ.png 


앱 최적화는 많은 작업이며 아키텍처가 모두 다르지만 성능 최적화를 얻는 것은 React 내부가 실제로 작동하는 방식을 이해하는 놀라운 방법입니다. 당신이 기사를 즐겼기를 바랍니다!