uniapp 프로젝트를 최적화하는 방법은 무엇입니까? 다음 기사에서는 uniapp 프로젝트 최적화 방법과 제안 사항을 공유하겠습니다. 도움이 되기를 바랍니다.
소개: 성능 최적화는 고대부터 최우선 과제였습니다. 유니앱 프로젝트 최적화 방법의 가장 포괄적인 모음은 개발 상황에 따라 보완됩니다.
1 복잡한 페이지 데이터 영역은 구성 요소로 캡슐화됩니다.
시나리오:
예를 들어 프로젝트에 유사한 포럼 페이지가 포함되어 있습니다. 좋아요 아이콘을 클릭하면 좋아요 수가 즉시 +1이 되어 js의 페이지 수준에서 모든 데이터의 동기화가 트리거됩니다. 레이어를 뷰 레이어에 추가하면 전체 페이지의 데이터가 업데이트되어 클릭 지연이 발생합니다
최적화 계획:
복잡한 페이지의 경우 특정 영역의 데이터를 업데이트할 때 이 영역을 구성 요소를 사용하여 데이터를 업데이트할 때 이 구성 요소만 업데이트됩니다
참고: app-nvue 이 문제는 h5에는 존재하지 않습니다. 차이점이 있는 이유는 애플릿이 현재 구성 요소 차이 업데이트 메커니즘만 제공하고 자동으로 계산할 수 없기 때문입니다. 모든 페이지에 차이
2. 큰 이미지 사용을 피하세요
시나리오:
페이지에서 대용량 이미지 리소스를 많이 사용하면 페이지 전환이 지연되어 시스템 메모리가 증가하고 심지어 큰 바이너리 파일의 흰색 화면 충돌도 리소스를 많이 소모합니다
최적화 계획:
사용하기 전에 이미지를 압축하고 필요한 경우 스프라이트 이미지나 svg를 고려할 수 있습니다. .간단한 코드로 구현이 가능하다면 이미지가 필요하지 않습니다. 3. 소규모 프로그램 및 APP 하청을 위한 페이지가 너무 많습니다.
공식 홈페이지 매뉴얼 보기 구성
4.
기능 설명:
이 기능은 WeChat 미니 프로그램, Apps, Baidu 미니 프로그램 및 ByteDance 미니 프로그램에만 유효합니다.
uView 매뉴얼로 이동 구성 보기
5. 로컬 저장소 남용은 금지됩니다.
로컬 페이지 간에 매개변수를 전달하려면 URL을 사용하세요. 로컬 저장소를 사용하여 데이터를 전송하는 경우 요청 시 이름을 지정하고 파기해야 합니다. 6. 외부에서 정의된 변수
uni-app에서는 데이터에 정의된 데이터가 변경될 때마다 뷰 레이어에 페이지를 다시 렌더링하라는 알림이 전달되므로 해당 변수가 뷰에 필요하지 않으면 그렇게 합니다. 데이터에 정의할 필요는 없지만 외부에서 변수를 정의하거나 리소스 낭비를 피하기 위해 vue 인스턴스에 직접 마운트할 수 있습니다
7. 데이터를 일괄 로드하여 페이지 렌더링을 최적화합니다
시나리오:
페이지가 초기화되면 로직 레이어가 한 번에 많은 양의 데이터를 뷰 레이어에 전달합니다. 데이터, 뷰 레이어는 한 번에 많은 수의 노드를 렌더링하므로 통신 속도 저하 및 페이지 전환 지연이 발생할 수 있습니다. 최적화 계획:
페이지를 부분적으로 업데이트하여 페이지를 렌더링합니다. 예를 들어 서버가 100개의 데이터를 반환하는 경우 일괄 로드하고 한 번에 50개 항목을 로드한 후 500ms 후에 다음 로드를 진행할 수 있습니다.
8. 뷰 레이어와 로직 레이어 사이
스크롤 뷰 구성 요소의 스크롤 이벤트 모니터링을 줄입니다. 스크롤 뷰를 모니터링할 때 뷰 레이어는 이벤트를 스크롤할 때 자주 데이터를 로직 레이어로 보냅니다
스크롤 뷰 구성 요소의 스크롤 이벤트를 수신할 때 스크롤 상단/왼쪽 스크롤 속성을 실시간으로 변경하지 마세요. 스크롤을 모니터링할 때 뷰 레이어가 스크롤 시 데이터를 논리 레이어 통신으로 보내기 때문입니다. -top/scroll-left가 변경되면 로직 레이어가 뷰 레이어와 통신하므로 onPageScroll 사용에 주의하세요. onPageScroll이 모니터링되면 뷰 레이어가 로직 레이어와 자주 통신하게 됩니다.
11. 페이지 전환 애니메이션을 최적화하세요
시나리오:
페이지가 초기화되면 많은 수의 사진 또는 기본 구성 요소 렌더링과 많은 양의 데이터 통신이 발생합니다. 리소스를 확보하기 위해 새로운 페이지 렌더링 및 양식 입력 애니메이션이 발생하여 페이지 전환 지연 및 프레임 저하가 발생합니다.
최적화 계획:
미루는 것을 권장합니다. 그림이나 복잡한 기본 구성 요소를 렌더링하는 데 100ms~300ms가 걸리고, 일괄적으로 데이터 통신을 수행하여 한 번에 렌더링되는 노드 수를 줄입니다. 애니메이션 효과 앱 측에서 사용자 정의할 수 있습니다. 팝핀/팝아웃의 이중 형태 링크 돌출 애니메이션 효과가 적합합니다. 리소스 소비가 더 크면 애니메이션 중에 페이지에서 시간이 많이 걸리는 js를 실행하는 경우 애니메이션이 프레임 드롭될 수 있습니다. 이때, 오른쪽 슬라이드/오른쪽 슬라이드 등 리소스 소모가 적은 애니메이션 효과를 사용할 수 있습니다. -
App-nvue 및 H5도 페이지 미리 로드
uni.preloadPage- 를 지원합니다. 더 나은 사용자 경험 제공
12. 배경색을 흰색으로 깜박이도록 최적화
Scene:
Enter 페이지 배경이 어두울 경우 배경이 흰색으로 깜박이는 경우가 있습니다. vue 페이지에서 새 양식은 애니메이션이 처음 시작될 때 회색-흰색 배경을 가지며 애니메이션이 끝나면 어두운 배경으로 변경되어 스플래시 화면이 발생합니다
최적화 솔루션 :
앱에서 스타일 작성 .vue는 페이지 스타일 렌더링 속도를 높일 수 있습니다. App.vue의 스타일은 전역 스타일입니다. 새 페이지가 열릴 때마다 App.vue의 스타일이 먼저 로드된 다음 일반 스타일이 로드됩니다. vue 페이지
- 앱 측은 페이지의 기본 배경색을 Pages.json 페이지 스타일에서 별도로 구성할 수도 있습니다. 예를 들어 globalStyle->style->app-plus에서 전역 배경색을 구성합니다. ->배경
"style": { "app-plus": { "background":"#000000" } }
로그인 후 복사
nvue 페이지에는 이 문제가 없으며 nvue 페이지로 변경할 수도 있습니다
더 큰 엔지니어링 코드 포함 배경 이미지와 로컬 글꼴 파일은 미니 프로그램의 시작 속도에 영향을 미칩니다. 크기 조절에 주의해야 합니다.
uni-app의 H5 클라이언트 측에서 uni-app은 다음을 제공합니다. 트리 쉐이킹 최적화 메커니즘. 트리 쉐이킹 최적화 전 uni-app의 전체 패키지 크기는 약 500k이고, gzip이 서버에 배포된 후에는 162k입니다. 트리 쉐이킹 최적화를 활성화하려면 manifest 구성에서 uni-app의 앱 측을 구성해야 합니다. Android 기본 엔진은 약 9M입니다. 해당 앱은 지도, 블루투스 등의 확장 모듈도 제공합니다. 패키징 중에 이러한 모듈이 필요하지 않으면 배포 패키지를 줄이기 위해 잘라낼 수 있습니다. 크기는 Manifest.json-App 모듈 권한에서 선택할 수 있습니다.
- 앱 지원 순수 nvue 프로젝트를 선택하는 경우(렌더러 설정: 매니페스트의 app-plus 아래의 "native"), 패키지 크기를 약 2M 더 줄일 수 있습니다
- HBuilderX 2.7 이후 앱 측에서는 v3 이외의 컴파일 모드를 삭제하고 패키지 크기도 3M 정도 줄었습니다.
15. 외부 js 플러그인 남용은 금지됩니다 설명:- 공식 API가 있는 경우 프로젝트 크기를 늘리기 위해 추가 js 플러그인을 사용하지 마세요
예:
Url은 encodeURIComponent() 및 decodeURIComponent()를 직접 사용하여 비밀번호
를 전달합니다. 권장 사항: "uniapp tutorial
"
위 내용은 uniapp 프로젝트를 최적화하는 방법은 무엇입니까? 여러 가지 최적화 계획 및 제안 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!