uni-app's trick to double the performance of WeChat

Related learning recommendations: WeChat Mini Program Development Tutorial

# #Multiple demonstrations and several months of research and development, we rewrote part of the

Vue bottom layer and reconstructed the uni-app framework, achieving double the performance of the WeChat side and more Vue syntax support.

Background

uni-app learned from mpvue in the early stage to achieve rapid compatibility with the WeChat applet. Thanks to the Meituan-Dianping team for open source Community contribution!

As more and more developers use

uni-app, business complexity continues to increase, and many developers complain about the vue syntax supported by uni-app There are performance problems in some scenarios (especially when there are complex components on the page). These problems are actually caused by the implementation mechanism of mpvue. Let’s take the performance problems of complex components as an example to briefly explain.

When frameworks such as mpvue/wepy were born, WeChat applets did not yet support custom components and could not be developed in components. To solve this problem, mpvue/wepy creatively compiled Vue components written by users into The template in WXML realizes component development capabilities in disguise and improves code reusability. This was a great technical solution under the technical conditions at the time. However, this solution will also cause the data in the Vue component to be compiled into the data in the Page, and data updates to the component will also call

Page.setData based on path mapping. Especially in pages with many components and large amounts of data, local updates of each component will trigger global updates at the page level, resulting in huge performance overhead.

The custom components later launched by WeChat actually support partial updates at the component level. After verification, we found that data updates at the component level have a significant performance improvement compared to global updates on the page.

In addition,

mpvuethe vnode comparison and data diff performed in the Vue layer is not completely calculated, which will also consume part of the performance.

Based on these reasons, we started the framework rewriting work on WeChat.

New version features

Doubled performance

New version

uni-app Adjusted and rewritten part of the Vue.js underlying implementation, Mainly includes:

Implementation of component-based development of
• Vue.js based on custom components of mini-programs
• VueLayer cancellation vnodeCompared with
, more thorough
• diff calculation, setData()less communication data volume

New framework rewriting Finally, we constructed the following test model:

Construct a list interface, each list item is a custom component
• Pull-up loading triggers data update, each time it is read from the local Get static data and shield network differences
• Trigger the data update timing to start, and the page rendering completion timing to end, find the time difference as a comparison indicator (time consuming, in milliseconds)

Then respectively Using the new and old frameworks, conduct multiple tests on the same mobile phone (vivo nex), find the average, and obtain the following results:

Number of componentsOld frame (mpvue)New frame##200400##800341ms180ms1000653ms196ms

Judging from the test data, the performance of the new framework has doubled on complex pages! Especially for pages with more data and more complex components, the performance improvement will be greater!

Tips: We also conducted a performance test on several current mainstream cross-end frameworks (such as taro, wepy, chameleon, etc.), and the running score results of uni-app are equally eye-catching. The test code and test results will be made public in the near future for everyone to judge, so stay tuned.

More Vue syntax support

We have also enhanced the uni-app compiler to support more Vue syntax, the details are as follows:

• Support filterfilter
• Support more complex JavaScript rendering expressions
• Support in template Use the functions in methods
• Supportv-html (Same as the analysis of rich-text)
• Component support Native event binding, such as: @tap.native

Experience method

Currently, the new framework has been developed on WeChat, and other small programs and Apps The compiler is still an old version. We have released a group beta version and invited developers to experience it early on WeChat.

The developer creates vue-cli as follows and creates the uni-app project, compiles and releases it to the WeChat applet:

# 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复制代码

Switching between old and new versions

In order not to affect the old project, uni-appThe group test version currently has both new and old frameworks built in, and the old framework is used by default. Developers can configure it manifest.json -> mp-weixin -> usingComponentsThe node enables the new compilation framework, as follows:

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

If you use the new Vue syntax, please note that only H5 and WeChat support these new syntaxes. When compiling to other platforms, conditional compilation must be used.

Tips:

• To ensure the compatibility of custom components, it is recommended to set the WeChat basic library to the latest version when running the WeChat developer tools.
• When experiencing the new framework, if you have any questions or suggestions, please submit an issue to github

Current situation and future

After the Spring Festival, uni-appVersion 1.6 is released, adding support for the ByteDance mini program platform; at this point, a set of codes and 7-end release are achieved! The 7 terminals include: App (iOS/Android), mini program (WeChat/Alipay/Baidu/ByteDance), H5 platform, see the picture below:

Mass development Developers have enthusiastically poured into the uni-app community. There are currently dozens of uni-app exchange groups. The picture below shows a QQ exchange group with 500 people. The group was full within 2 days of its creation. The enthusiasm of developers is evident.

Currently, thousands of newly created uni-app projects (including test projects) are created every day. There are over 10,000 cases, some of which can be found at uniapp.dcloud.io/case. Compared with the WeChat mini program cases in Taro and other frameworks, the cross-end cases of uni-app are much richer.

Among the small program cross-end frameworks, uni-app is perhaps the front-end framework with the largest number of users and the richest cross-end cases.

Recently, in order to activate the Vue multi-terminal development ecosystem, the plug-in development competition jointly organized by the uni-app and mpvue teams has officially begun! Developers are welcome to actively participate. While making wheels and benefiting the community, you can also get prizes (iphone

Next, the uni-app team will continue to run at full speed and rapidly improve the following aspects:

• uni-app’s new framework is compatible with other platforms
• uni-ui cross-terminal UI library refinement
• Introducing more native rendering on the App side to improve system performance experience
• The surrounding ecology is further improved, such as industry templates, cross-terminal statistics, etc.

"Born for developers" is not a slogan, but a positioning.

uni-appThe team will continue to solve development pain points and improve development efficiency for developers!

For more other excellent articles, please pay attention to the uni-app column~

204ms	129ms
280ms	139ms

The above is the detailed content of uni-app's trick to double the performance of WeChat. For more information, please follow other related articles on the PHP Chinese website!