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

青灯夜游
풀어 주다: 2021-08-25 19:39:44
앞으로
3979명이 탐색했습니다.

uniapp 프로젝트를 최적화하는 방법은 무엇입니까? 다음 기사에서는 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이 모니터링되면 뷰 레이어가 로직 레이어와 자주 통신하게 됩니다.

    js 타이머 작업 인터페이스를 통해 애니메이션 대신 CSS 애니메이션을 더 많이 사용하세요
  • 캔버스에서 후속 작업을 수행해야 하는 경우 앱 측에서는 renderjs를 사용하고 애플릿에서는 웹 보기를 사용하는 것이 좋습니다 side Component; 웹뷰의 페이지는 로직 레이어와 뷰 레이어의 분리 개념이 없으므로 당연히 통신 손실이 없습니다
  • 9. CSS 최적화

  • 어떤 속성이 상속되는지 알아야 합니다. 글꼴, 글꼴 색상 및 텍스트 크기와 같은 효과는 모두 상속되며 의미 없는 반복 코드는 금지됩니다. 대기 기간 동안 다시 트리거되면 대기 시간이 다시 초기화됩니다
  • 제한:
  • 트리거 이벤트는 n초가 지나지 않으면 한 번만 실행되어 트리거됩니다. 다시 유효하지 않습니다

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 페이지로 변경할 수도 있습니다
    • 13. 시작 속도 최적화

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

    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    원천:juejin.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿