uniapp 프로젝트를 최적화하는 방법은 무엇입니까? 여러 가지 최적화 계획 및 제안 공유-uni-app-php.cn

uniapp 프로젝트를 최적화하는 방법은 무엇입니까? 다음 기사에서는 uniapp 프로젝트 최적화 방법과 제안 사항을 공유하겠습니다. 도움이 되기를 바랍니다.

uniapp 프로젝트를 최적화하는 방법은 무엇입니까? 여러 가지 최적화 계획 및 제안 공유

소개: 성능 최적화는 고대부터 최우선 과제였습니다. 유니앱 프로젝트 최적화 방법의 가장 포괄적인 모음은 개발 상황에 따라 보완됩니다.

1 복잡한 페이지 데이터 영역은 구성 요소로 캡슐화됩니다.

시나리오:

예를 들어 프로젝트에 유사한 포럼 페이지가 포함되어 있습니다. 좋아요 아이콘을 클릭하면 좋아요 수가 즉시 +1이 되어 js의 페이지 수준에서 모든 데이터의 동기화가 트리거됩니다. 레이어를 뷰 레이어에 추가하면 전체 페이지의 데이터가 업데이트되어 클릭 지연이 발생합니다

최적화 계획:

복잡한 페이지의 경우 특정 영역의 데이터를 업데이트할 때 이 영역을 구성 요소를 사용하여 데이터를 업데이트할 때 이 구성 요소만 업데이트됩니다

참고: app-nvue 이 문제는 h5에는 존재하지 않습니다. 차이점이 있는 이유는 애플릿이 현재 구성 요소 차이 업데이트 메커니즘만 제공하고 자동으로 계산할 수 없기 때문입니다. 모든 페이지에 차이

2. 큰 이미지 사용을 피하세요

시나리오:

페이지에서 대용량 이미지 리소스를 많이 사용하면 페이지 전환이 지연되어 시스템 메모리가 증가하고 심지어 큰 바이너리 파일의 흰색 화면 충돌도 리소스를 많이 소모합니다

최적화 계획:

사용하기 전에 이미지를 압축하고 필요한 경우 스프라이트 이미지나 svg를 고려할 수 있습니다. .간단한 코드로 구현이 가능하다면 이미지가 필요하지 않습니다. 3. 소규모 프로그램 및 APP 하청을 위한 페이지가 너무 많습니다.

공식 홈페이지 매뉴얼 보기 구성

기능 설명:

이 기능은 WeChat 미니 프로그램, Apps, Baidu 미니 프로그램 및 ByteDance 미니 프로그램에만 유효합니다.

uView 매뉴얼로 이동 구성 보기

5. 로컬 저장소 남용은 금지됩니다.

로컬 페이지 간에 매개변수를 전달하려면 URL을 사용하세요. 로컬 저장소를 사용하여 데이터를 전송하는 경우 요청 시 이름을 지정하고 파기해야 합니다. 6. 외부에서 정의된 변수

uni-app에서는 데이터에 정의된 데이터가 변경될 때마다 뷰 레이어에 페이지를 다시 렌더링하라는 알림이 전달되므로 해당 변수가 뷰에 필요하지 않으면 그렇게 합니다. 데이터에 정의할 필요는 없지만 외부에서 변수를 정의하거나 리소스 낭비를 피하기 위해 vue 인스턴스에 직접 마운트할 수 있습니다

7. 데이터를 일괄 로드하여 페이지 렌더링을 최적화합니다

시나리오:

페이지가 초기화되면 로직 레이어가 한 번에 많은 양의 데이터를 뷰 레이어에 전달합니다. 데이터, 뷰 레이어는 한 번에 많은 수의 노드를 렌더링하므로 통신 속도 저하 및 페이지 전환 지연이 발생할 수 있습니다. 최적화 계획:

페이지를 부분적으로 업데이트하여 페이지를 렌더링합니다. 예를 들어 서버가 100개의 데이터를 반환하는 경우 일괄 로드하고 한 번에 50개 항목을 로드한 후 500ms 후에 다음 로드를 진행할 수 있습니다.

8. 뷰 레이어와 로직 레이어 사이

스크롤 뷰 구성 요소의 스크롤 이벤트 모니터링을 줄입니다. 스크롤 뷰를 모니터링할 때 뷰 레이어는 이벤트를 스크롤할 때 자주 데이터를 로직 레이어로 보냅니다

스크롤 뷰 구성 요소의 스크롤 이벤트를 수신할 때 스크롤 상단/왼쪽 스크롤 속성을 실시간으로 변경하지 마세요. 스크롤을 모니터링할 때 뷰 레이어가 스크롤 시 데이터를 논리 레이어 통신으로 보내기 때문입니다. -top/scroll-left가 변경되면 로직 레이어가 뷰 레이어와 통신하므로 onPageScroll 사용에 주의하세요. onPageScroll이 모니터링되면 뷰 레이어가 로직 레이어와 자주 통신하게 됩니다.

9. CSS 최적화
제한:
트리거 이벤트는 n초가 지나지 않으면 한 번만 실행되어 트리거됩니다. 다시 유효하지 않습니다

11. 페이지 전환 애니메이션을 최적화하세요

시나리오:

페이지가 초기화되면 많은 수의 사진 또는 기본 구성 요소 렌더링과 많은 양의 데이터 통신이 발생합니다. 리소스를 확보하기 위해 새로운 페이지 렌더링 및 양식 입력 애니메이션이 발생하여 페이지 전환 지연 및 프레임 저하가 발생합니다.

최적화 계획:

App-nvue 및 H5도 페이지 미리 로드
를 지원합니다. 더 나은 사용자 경험 제공
12. 배경색을 흰색으로 깜박이도록 최적화

Scene:

Enter 페이지 배경이 어두울 경우 배경이 흰색으로 깜박이는 경우가 있습니다. vue 페이지에서 새 양식은 애니메이션이 처음 시작될 때 회색-흰색 배경을 가지며 애니메이션이 끝나면 어두운 배경으로 변경되어 스플래시 화면이 발생합니다

최적화 솔루션 :

앱에서 스타일 작성 .vue는 페이지 스타일 렌더링 속도를 높일 수 있습니다. App.vue의 스타일은 전역 스타일입니다. 새 페이지가 열릴 때마다 App.vue의 스타일이 먼저 로드된 다음 일반 스타일이 로드됩니다. vue 페이지

앱 측은 페이지의 기본 배경색을 Pages.json 페이지 스타일에서 별도로 구성할 수도 있습니다. 예를 들어 globalStyle->style->app-plus에서 전역 배경색을 구성합니다. ->배경

"style": { "app-plus": { "background":"#000000" } }

로그인 후 복사

nvue 페이지에는 이 문제가 없으며 nvue 페이지로 변경할 수도 있습니다

13. 시작 속도 최적화

더 큰 엔지니어링 코드 포함 배경 이미지와 로컬 글꼴 파일은 미니 프로그램의 시작 속도에 영향을 미칩니다. 크기 조절에 주의해야 합니다.

앱 측에서 스플래시를 닫을 때 흰색 화면 감지 메커니즘이 있습니다. 홈페이지가 항상 비어 있거나 홈페이지 자체가 빈 전송 페이지이므로 스플래시가 닫히는 데 10초가 걸릴 수 있습니다.
홈페이지가 nvue 페이지인 경우 앱 측은 v3 컴파일러를 사용합니다.
빠른 시작 모드
이때 앱이 가장 빠르게 시작됩니다
앱은 순수 nvue 프로젝트(매니페스트의 app-plus에 설정됨) 렌더러: "native")로 설정되어 있으며 이러한 종류의 프로젝트가 시작됩니다. 전체 애플리케이션이 네이티브 렌더링을 사용하고 webview 기반 프레임워크를 로드하지 않기 때문에 더 빠르고 2초 만에 시작할 수 있습니다. 최적화 패키지 크기
uni-app이 작은 프로그램으로 출시되는 경우 , es6~es5 및 CSS 정렬 기능을 사용하면 코드 크기가 커질 수 있습니다. 이러한 컴파일 기능을 켤지 여부를 구성할 수 있습니다.

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 정도 줄었습니다.
공식 API가 있는 경우 프로젝트 크기를 늘리기 위해 추가 js 플러그인을 사용하지 마세요
예:

Url은 encodeURIComponent() 및 decodeURIComponent()를 직접 사용하여 비밀번호