WeChat 성능을 두 배로 높이는 uni-app의 트릭

관련 학습 권장사항: WeChat 미니 프로그램 개발 튜토리얼

많은 시연과 수개월의 연구 개발 끝에 우리는 Vue의 하단 레이어 일부를 다시 작성했으며 재구성된 uni-app 프레임워크는 WeChat 클라이언트의 성능을 두 배로 높이고 더 많은 Vue 구문Vue底层、重构uni-app框架，实现了微信端性能翻倍及更多Vue语法支持。

背景

uni-app在初期借鉴了mpvue，实现了微信小程序端的快速兼容，感谢美团点评团队对于开源社区的贡献！

随着使用uni-app的开发者愈来愈多，业务复杂度不断增加，不少开发者抱怨uni-app支持的vue语法少，某些场景性能有问题（特别是页面存在复杂组件的情况），这些问题其实是由mpvue的实现机制导致的，我们以复杂组件的性能问题为例简要说明。

mpvue/wepy 等框架诞生之初，微信小程序尚不支持自定义组件，无法进行组件化开发；mpvue/wepy 为解决这个问题，创造性的将用户编写的Vue组件，编译为WXML中的模板（template)，这样变相实现了组件化开发能力，提高代码复用性，这在当时的技术条件下是很棒的技术方案。但如此方案，也导致Vue组件中的数据会被编译为Page中的数据，对组件进行数据更新也会基于路径映射调用Page.setData。特别是组件较多、数据量交大的页面中，每个组件的局部更新会引发页面级别的全局更新，产生极大的性能开销。

微信后来推出的自定义组件，其实支持组件级别的局部更新，经验证，我们发现组件级别的数据更新，相比页面全局更新，有大幅性能提升。

另外，mpvue在Vue层进行的vnode对比及数据diff计算不彻底，也会消耗部分性能。

基于这些原因，我们开始了微信端的框架重写工作。

新版特性

性能翻倍

新版 uni-app 调整重写了部分Vue.js底层实现，主要包括：

• 基于小程序自定义组件实现 Vue.js 的组件化开发
• Vue层取消vnode对比
• 更彻底的diff计算，setData()을 지원합니다.

배경

uni-app 구현 초기에 mpvue에서 배운 WeChat 미니 프로그램의 빠른 호환성 덕분에 오픈 소스 커뮤니티에 기여한 Meituan-Dianping 팀에 감사드립니다!

점점 더 많은 개발자가 uni-app을 사용함에 따라 비즈니스 복잡성이 계속 증가합니다. 많은 개발자가 uni-app이 더 적은 Vue 구문을 지원한다고 불평합니다. (특히 페이지에 복잡한 구성 요소가 있는 경우) 이러한 문제는 실제로 mpvue의 구현 메커니즘으로 인해 발생합니다. 예를 들어 복잡한 구성 요소의 성능 문제를 간략하게 설명하겠습니다.

• mpvue/wepy와 같은 프레임워크가 탄생했을 때 WeChat mini 프로그램은 아직 사용자 정의 구성 요소를 지원하지 않았으며 구성 요소에서 개발할 수 없었습니다. 이 문제를 해결하기 위해 mpvue/wepy는 사용자가 작성한 Vue 구성 요소를 WXML(템플릿)의 템플릿으로 창의적으로 컴파일했습니다. ) 이는 Disguise의 구성 요소 개발 기능을 달성하고 코드 재사용성을 향상시킵니다. 이는 당시 기술 조건에서 훌륭한 기술 솔루션이었습니다. 그러나 이 솔루션을 사용하면 Vue 구성 요소의 데이터가 페이지의 데이터로 컴파일되고 구성 요소에 대한 데이터 업데이트도 경로 매핑을 기반으로 Page.setData를 호출하게 됩니다. 특히 구성 요소가 많고 데이터 양이 많은 페이지의 경우 각 구성 요소의 로컬 업데이트가 페이지 수준에서 전역 업데이트를 트리거하여 성능 오버헤드가 커집니다.
• WeChat에서 나중에 출시한 사용자 정의 구성 요소는 실제로 구성 요소 수준에서 부분 업데이트를 지원합니다. 검증 결과, 구성 요소 수준의 데이터 업데이트가 페이지의 글로벌 업데이트에 비해 성능이 크게 향상되는 것으로 나타났습니다.
• 또한 Vue 레이어의 mpvue의 vnode 비교 및 ​​데이터 diff 계산이 철저하지 않아 성능.

이러한 이유로 WeChat에서 프레임워크 재작성 작업을 시작했습니다.

새 버전 기능

두 배의 성능

새 버전 uni-app은 주로 다음을 포함하여 Vue.js의 기본 구현 일부를 조정하고 다시 작성했습니다. Vue.js구현 미니 프로그램 맞춤형 구성 요소 기반 > 구성 요소 기반 개발 Vue 레이어는 보다 철저한 diff 계산에 비해 vnode를 취소합니다. >setData()적은 양의 통신 데이터 새 프레임워크를 다시 작성한 후 다음 테스트 모델을 구성했습니다. 목록 인터페이스를 구성하고 각 목록 항목은 사용자 정의 구성 요소입니다. 풀업 로딩 데이터 업데이트를 트리거할 때마다 로컬에서 정적 데이터를 읽고 네트워크 차이를 보호합니다트리거 데이터 업데이트 타이밍이 시작되고 페이지 렌더링이 완료되며 시간 차이가 비교 지표로 사용됩니다(시간 소모, 밀리초)그런 다음 동일한 휴대폰(vivo nex)에서 여러 테스트 수행에서 각각 새 프레임워크와 이전 프레임워크를 사용하여 평균을 구하고 다음 결과를 얻습니다. 프레임워크204ms 280ms 341ms

		200
129ms		400
139ms		800

180ms🎜🎜🎜🎜1000 🎜🎜653ms🎜🎜196ms🎜🎜🎜 🎜

테스트 데이터에 따르면 복잡한 페이지에서 새로운 프레임워크의 성능이 두 배로 향상되었습니다! 특히 더 많은 데이터와 더 복잡한 구성 요소가 있는 페이지의 경우 성능 향상이 더욱 커집니다!

팁: 현재 여러 주류 크로스엔드 프레임워크(예: taro, wepy, chameleon 등)에 대한 성능 테스트도 수행했습니다. uni-app의 실행 점수 결과도 눈길을 끕니다. future, 테스트 코드, 테스트 결과는 공개되어 모든 사람의 판단에 공개되므로 계속 지켜봐 주시기 바랍니다.

추가 Vue 구문 지원

아래에 설명된 대로 더 많은 Vue 구문을 지원하도록 uni-app 컴파일러도 향상되었습니다. uni-app编译器，支持了更多 Vue 语法，详细如下：

• 支持过滤器 filter
• 支持比较复杂的 JavaScript 渲染表达式
• 支持在 template 内使用 methods 中的函数
• 支持 v-html （同 rich-text 的解析）
• 组件支持原生事件绑定，如：@tap.native

体验方式

目前新框架在微信端已完成开发，其他小程序和App的编译器仍为旧版。我们放出群测版，邀请开发者在微信端抢鲜体验。

开发者按照如下方式创建vue-cli并创建uni-app项目，编译发行到微信小程序：

# npm script# 全局安装vue-cli$ npm install -g @vue/cli# 创建uni-app项目，会提示选择项目模板，初次接触建议选择 hello uni-app 模板$ vue create -p dcloudio/uni-preset-vue my-project# 进入项目目录$ cd my-project# dev 模式，编译预览$ npm run dev:mp-weixin# build 模式，发行打包$ npm run build:mp-weixin复制代码

新老版本切换

为了不影响老项目，uni-app群测版目前同时内置新、老两个框架，且默认使用老框架，开发者可通过配置 manifest.json -> mp-weixin -> usingComponents节点启用新编译框架，如下：

// manifest.json
{
	// ...
	/* 小程序特有相关 */
	"mp-weixin": {
		"usingComponents":true //启用新框架编译，默认为false
	}
}复制代码

如果你使用了新增的vue语法，请注意只有H5和微信支持这些新语法，编译到其他平台时，要用条件编译处理。

Tips：

• 为保证自定义组件兼容性，运行到微信开发者工具时，建议将微信基础库设置为最新版本。
• 体验新框架时，有任何问题或者建议，欢迎到github提交 issue

现状与未来

春节过后，uni-app1.6版本发布，新增字节跳动小程序平台支持；至此，实现一套代码、7端发布！7端分别包括：App（iOS/Android）、小程序（微信/支付宝/百度/字节跳动）、H5平台，见下图：

大量开发者热情涌入 uni-app 社区，目前已有几十个uni-app交流群，下图为一个500人的QQ交流群，创建2天即满群，开发者的热情可见一斑。

目前，每天新创建的uni-app项目（包括测试项目）达数千个，案例过万，部分案例见uniapp.dcloud.io/case。与Taro等框架清一色微信小程序案例相比，uni-app的跨端案例要丰富很多。

在小程序跨端框架中，uni-app也许是使用人数最多、跨端案例最丰富的前端框架。

近期，为活跃Vue多端开发生态，由uni-app与mpvue团队联合举办的插件开发大赛正式开始了！欢迎各位开发者踊跃参与，制造轮子、造福社区的同时，顺手再拿个奖品（iphone Xs Max、4K显示器等奖品多多），一举多得^_^，点击了解详情。

接下来，uni-app团队将继续全力奔跑，在如下方面快速完善：

• uni-app新框架兼容到其它平台
• uni-ui 跨端UI库精致化
• App端引入更多原生渲染，提升系能体验
• 周边生态进一步完善，比如行业模板、跨端统计等

“为开发者而生”，不是口号，而是定位。

uni-app

• 필터 지원 필터 code>
• 더 복잡한 JavaScript 렌더링 표현식 지원
• 의 템플릿 함수 내에서 메소드 사용 지원
code>
• v-html 지원(rich-text와 동일한 구문 분석)
• 구성 요소는 다음과 같은 기본 이벤트 바인딩을 지원합니다. : @tap.native

경험 방법

현재 새로운 개발 중 프레임워크는 WeChat에서 완성되었으며 다른 미니 프로그램과 앱의 컴파일러는 여전히 오래된 버전입니다. 우리는 그룹 베타 버전을 출시하고 개발자를 초대하여 WeChat에서 조기에 경험해 볼 수 있도록 했습니다.

개발자는 vue-cli를 생성하고 다음과 같이 uni-app 프로젝트를 생성하고 이를 컴파일하여 WeChat 애플릿에 게시합니다: rrreee이전 버전과 새 버전 간 전환

In 영향을 받지 않는 이전 프로젝트를 위해 uni-app의 그룹 베타 버전에는 현재 새 프레임워크와 이전 프레임워크가 모두 내장되어 있으며 기본적으로 이전 프레임워크가 사용됩니다. 개발자는 매니페스트를 통해 이를 구성할 수 있습니다. .json -> ; mp-weixin -> usingComponents 노드는 다음과 같이 새로운 컴파일 프레임워크를 활성화합니다.

rrreee🎜새 vue를 사용하는 경우 구문은 H5 및 WeChat에서만 지원된다는 점에 유의하세요. 이러한 새로운 구문은 다른 플랫폼으로 컴파일할 때 조건부 컴파일을 사용하여 처리해야 합니다. 🎜🎜팁: 🎜

• 사용자 정의 구성 요소의 호환성을 보장하려면 WeChat 개발자 도구를 실행할 때 WeChat 기본 라이브러리를 최신 버전으로 설정하는 것이 좋습니다.
• 새 프레임워크를 경험하면서 질문이나 제안 사항이 있는 경우 github에 문제를 제출하실 수 있습니다.

현재 상태와 미래

🎜춘절 이후 uni-app 버전 1.6이 출시되어 ByteDance 미니 프로그램 플랫폼에 대한 지원이 추가됩니다. 코드와 7엔드 출시가 달성됩니다! 7개 터미널에는 다음이 포함됩니다: 앱(iOS/Android), 미니 프로그램(WeChat/Alipay/Baidu/Bytedance), H5 플랫폼, 아래 그림 참조: 🎜🎜🎜🎜유니앱 커뮤니티에는 수많은 개발자들이 열정적으로 쏟아져 나왔고, 현재 수십 개의 uni -App 커뮤니케이션 그룹 아래 사진은 500명의 QQ 커뮤니케이션 그룹을 보여줍니다. 이 그룹은 생성된 지 2일 만에 가득 찼습니다. 🎜🎜🎜

🎜현재 새로 생성된 uni-app 프로젝트(테스트 포함)는 매일 생성되는 프로젝트 수는 수천 개), 사례 수는 uniapp.dcloud.io/case를 참조하세요. WeChat 미니 프로그램 사례만 사용하는 Taro 및 기타 프레임워크에 비해 uni-app에는 크로스 엔드 사례가 훨씬 더 많습니다. 🎜🎜소규모 프로그램 크로스엔드 프레임워크 중에서 uni-app은 아마도 가장 많은 사용자와 가장 풍부한 크로스엔드 사례를 보유한 프런트엔드 프레임워크일 것입니다. 🎜🎜최근에는 Vue의 멀티 터미널 개발 생태계 활성화를 위해 uni-app과 mpvue 팀이 공식적으로 시작되었습니다! 개발자 여러분의 적극적인 참여를 환영합니다. 바퀴를 만들고 커뮤니티에 혜택을 주는 동시에 상품(iphone)도 받을 수 있습니다. 🎜🎜다음으로, <code>uni-app 팀은 다음 측면을 빠르게 개선하기 위해 지속적으로 열심히 노력할 것입니다: 🎜

• uni-app의 새로운 프레임워크는 다른 플랫폼과 호환됩니다
• uni-ui 크로스 터미널 UI 라이브러리가 개선되었습니다.
• 앱 측은 시스템 성능 경험을 개선하기 위해 더 많은 기본 렌더링을 도입했습니다.
• 다음과 같은 주변 생태계가 더욱 개선되었습니다. 산업 템플릿, 교차 터미널 통계 등.
• li>

🎜 "개발자를 위해 태어났다"는 슬로건이 아니라 포지셔닝입니다. 🎜🎜uni-app 팀은 계속해서 개발자가 개발 문제점을 해결하고 개발 효율성을 향상할 수 있도록 돕겠습니다! 🎜🎜🎜더 많은 좋은 글을 보시려면 🎜uni-app🎜 칼럼을 주목해주세요~🎜🎜🎜

위 내용은 WeChat 성능을 두 배로 높이는 uni-app의 트릭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!