After many arguments and months of research and development, we rewrote part of Vue bottom layer, reconstructed uni-App framework, and realized double performance of wechat terminal and more Vue syntax support.

background

Uni-app borrowed from MPVue in the initial stage and realized fast compatibility of wechat mini program. Thanks to meituan-Dianping team for their contribution to the open source community!

With the increasing number of developers using UNI-App and the increasing complexity of business, many developers complain that uni-App does not support the VUE syntax and some scenarios have performance problems (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 problem of a complex component as an example.

At the beginning of the birth of mpvue/ WEPY and other frameworks, wechat small programs did not support custom components and could not be componentalized development. In order to solve this problem, MPVue/WEpy creatively compiled Vue components written by users into templates in WXML. In this way, component-based development ability was realized and code reuse was improved, which was a great technical solution under the technical conditions at that time. However, as a result, the data in the Vue component will be compiled to the data in the Page, and data updates to the component will also call page.setData based on the path map. Especially for pages with many components and a large amount of data, local updates of each component will cause global updates at the page level, resulting in high performance overhead.

The customized components launched by wechat later actually support partial update at the component level. It has been verified that the performance of data update at the component level is significantly improved compared with the global update of the page.

In addition, mpVUE’s incomplete vnode comparison and data diff calculation at the Vue layer will also consume part of performance.

Based on these reasons, we started to rewrite the framework of wechat terminal.

The new features

Double performance

The uni-app update rewrites some of the vue.js underlying implementations, including:

  • Based on theApplets custom componentsimplementationVue.jsComponentized development of
  • VueLayer to cancelvnodecontrast
  • A more thoroughdiffCalculation,setData()Less communication data

After the new framework was rewritten, we constructed the following test model:

  • Construct a list interface, with each list item as a custom component
  • Pull-up loading triggers data update, and static data is read locally each time, shielding network differences
  • When triggering data update, the timing starts and the page rendering ends, and the time difference is calculated as the comparison indicator (time consuming, in milliseconds).

Then, the new and old frameworks are respectively used to conduct multiple tests on the same mobile phone (Vivo NEX), and the average value is calculated to obtain the following results:

Number of components The old framework (mpvue) The new framework
200 204ms 129ms
400 280ms 139ms
800 341ms 180ms
1000 653ms 196ms

According to the test data, the performance of the new framework has doubled under the complex page! Especially for pages with more data and more complex components, the performance increase is greater!

We have also done a series of performance tests on several major cross-end frameworks (taro, Wepy, Chameleon, etc.), and uni-App’s performance results are also impressive. We will soon publish the test code and results for your review.

More Vue syntax support

We have also enhanced the UNI-app compiler to support more Vue syntax, detailed below:

  • Support filterfilter
  • Support more complexJavaScriptRender expression
  • Support intemplateusemethodsThe function in
  • supportv-html(withrich-textThe analysis)
  • Components support native event bindings such as:@tap.native

Experience the way

At present, the development of the new framework in wechat has been completed, and the compiler of other small programs and App is still the old version. We released a group test version, inviting developers to grab fresh experience on wechat.

The developers create vue-CLI and uni-app project as follows, compile and publish to wechat applet:

# npm script
# Global install VUE - CLI
$ npm install -g @vue/cli
When you create uni-app project, you will be prompted to select the project template. For the first time, please select hello Uni-app template
$ vue create -p dcloudio/uni-preset-vue my-project
Enter the project directory
$ cd my-project
# dev mode, compile preview
$ npm run dev:mp-weixin
# Build mode, release package
$ npm run build:mp-weixin
Copy the code

Switching between old and new versions

Json -> mp-weixin -> usingComponents to enable the new compilation framework:

// manifest.json { // ... /* Applet specific */ "mp-weixin": {"usingComponents":true // enable new framework compilation, default false}}Copy the code

If you use the new vue syntax, please note that only H5 and wechat support these new syntax, when compiling to other platforms, use conditional compilation.

Tips:

  • To ensure the compatibility of user-defined components, it is recommended that you set the wechat basic library to the latest version when running the wechat Developer tool.
  • If you have any questions or suggestions while trying out the new framework, please submit an issue on Github

Present and Future

After the Spring Festival, UNI-App version 1.6 was released with new support for bytedance applets platform. At this point, to achieve a set of code, 7 side release! 7 terminals respectively include App (iOS/Android), mini program (wechat/Alipay/Baidu/Bytedance) and H5 platform, as shown in the figure below:

There are dozens of uni-App communication groups. The following picture shows a QQ communication group of 500 people, which was filled in 2 days after it was created.

At present, thousands of UNI-App projects (including test projects) are created every day with over 10,000 cases. See uniapp.dcloud. IO /case for some cases. Uni-app’s cross-end cases are much richer than Taro’s and other cases.

Uni-app is perhaps the most widely used and cross-cased-rich front-end framework among small application cross-end frameworks.

Recently, uni-App and MPVue team jointly organized the Plug-in Development Competition to activate the Vue multi-end development ecosystem. Welcome developers to participate in the wheel building and benefit the community, and at the same time, take a prize (iPhone Xs Max, 4K display, etc.), click to learn more.

The UNI-App team will continue to work at full speed to improve the following areas:

  • Uni-app’s new framework is compatible with other platforms
  • Uni-ui Cross-terminal UI library refinement
  • More native rendering is introduced to the App end to improve the system experience
  • Peripheral ecology is further improved, such as industry template, cross-end statistics, etc

“Born for developers” is not a slogan, but a positioning.

The UNI-App team is committed to addressing development pain points and improving development efficiency.