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

Related learning recommendations:WeChat Mini Program Development Tutorial

Vuebottom layer and reconstructed theuni-appframework, achieving double the performance of the WeChat sideand more Vue syntaxsupport.

uni-applearned frommpvuein the early stage to achieve rapid compatibility with the WeChat applet. Thanks to the Meituan-Dianping team for open source Community contribution!

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

Page.setDatabased 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.

mpvuethevnodecomparison and datadiffperformed in the Vue layer is not completely calculated, which will also consume part of the performance.

uni-appAdjusted and rewritten part of theVue.jsunderlying implementation, Mainly includes:

Implementation of component-based development of
• Vue.jsbased on custom components of mini-programs
• VueLayer cancellationvnodeCompared with
, more thorough
• diffcalculation,setData()less communication data volume

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)

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 theuni-appcompiler to support more Vue syntax, the details are as follows:

• Support filterfilter
• Support more complexJavaScriptrendering expressions
• Support intemplateUse the functions inmethods
• Supportv-html(Same as the analysis ofrich-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 createsvue-clias 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 itmanifest.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 inTaroand other frameworks, thecross-end casesofuni-appare much richer.

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

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

Next, theuni-appteam 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 theuni-appcolumn~

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!