With vuE3 and Vite bidirectional support, UNI-App performance improves again

Uni-app’s vue3 & Vite upgrade is an incremental process:

September 2020: VuE3 development is supported for applets platform, and webPack is still used for compilers of applets platform;
May 2021: THE H5 platform supports the development of VUE3, and the compiler of H5 platform is upgraded to Vite;
August 2021: The App platform supports vuE3 development, and the App platform compiler is upgraded to Vite;
November 2021: Applet platform compiler upgraded to Vite;

Uni-app now supports Vite compilation and Vue 3.x running on all platforms.

So, what kind of improvements did this year-long upgrade bring to the Uni-App project?

It’s time to wrap up the wave.

The new UNI-App framework includes three major improvements:

Rewrite framework kernel: based onvue3 + tsRewrite the built-in components and apis to be more thorough and efficienttree-shaking;
New support for Vite build tools, in H5 platform to achieve second open preview;
New support for Vue3. X, to achieve more flexible development mode, and higher performance;

Based on these three improvements, the UNI-App project has achieved four major benefits:

More syntax support, combined API support, business focus, more efficient development;
Faster compilation speed, H5 platform ten times faster, small programs, App acceleration of more than 30%;
Better operation performance, faster user response, better experience;
Smaller code volume, more than 30% slimming, more volume saving, more flow saving

More syntax support

The new UNI-App supports the Vue 3.x framework and supports a composite API for more focused business development.

Some new features of Vue 3.x are now fully supported by UNI-app, such as:

support<script setup>
support<style scoped>,<style module>,State-Driven Dynamic CSS(v-bind)
supportjsx,tsx(H5, APP platform support, small program is not supported)

In addition, the new uni-App also extends more syntax on the applets platform, such as:

Improved template syntax support (e.gclass,styleSupport functions, variables, etc., not limited to arrays, object types)
More completepropsSupport (e.g., transfer functions)
More perfectslotSupport (e.g. scope slots)

Faster compilation speed

One of the most boring parts of a developer’s day is waiting for builds.

“What do programmers do while they’re waiting to compile? “Shows how embarrassing and boring the compile time can be for developers.

What is the improvement in uni-App compile time after vue3 & Vite update? How much benefit does it bring to developers? We schedule real tests and let the data speak for itself.

Test environment Description:

Hardware: RedmiBook 14 Second-generation processor: Intel(R) Core(TM) I7-1065G7 CPU @ 1.30GHz Memory: 16.0 GB OPERATING system: Windows 11 Professional 64-bitCopy the code

In terms of compilation speed, we compare two dimensions:

Vertical comparison: selectionuni-appCommon project templates were tested on H5, small program and App platforms respectivelyVue 2.6andvue 3.xCompile time of
Horizontal comparison: Create a default project template, record its compile time, and use the best cross-end frameworks in the industryuni-appthevue 3.xVersion comparison

Uni-app historical version vertical comparison

Three project templates, uni-App default template, Uni-Starter and Hello-Uniapp, were selected to test the compilation time of Vue 2.6 and Vue 3.x respectively.

Compilation time of UNI-APP project is collected as follows:

Vue 2.6Version build time = webpack stats.endtime – stats.startTime
vue 3.xGlobal.__vite_start_time = performance. Now (), when the build tool is finished: performane.now () – global

H5 platform

The three project templates of UNI-App were respectively run on H5 platform, and compiled and tested for several times. After calculating their mean values, the following data were obtained:

From this, we can observe:

inVue 2.6Under the environment, with the increase of project complexity, the compilation time of H5 homepage preview will increase linearly; This is because inVue 2.6Under version, although only preview the home page, but will still be usedwebpackCompile the entire project resources; Therefore, the more complex the project, the longer the compilation time;
invue 3.xUnder the environment, the compile time of H5 homepage preview is also related to the project complexity, but the increase is not large. This is because invue 3.xUnder version, useViteBuild, preview the home page only compile the home page and the resources it depends on, not compile other page resources.

From the chart comparison, we can intuitively conclude that the average compile time of the homepage in vue 3.x environment is less than one tenth of that in VUE 2.6 environment.

In other words, vue 3.x compiles the homepage ten times faster than Vue 2.6.

This tenfold efficiency improvement is mainly due to the new version using Vite as a build tool, which brings two major benefits:

Use native ESM files, no need to package, achieve fast service startup;
Preview (run) useesbuildAs a packaging tool, compared toVue 2.6Under the environment ofwebpack, build 10-100 times faster (this is not our exaggeration, see detailsesbuild)

With this tenfold efficiency boost, why don’t you guys get started?

Applets platform

After running the three template projects of UNI-App on the small program platform, compiling and testing for many times and calculating their mean values, the following data are obtained:

From the comparison data in the figure above, we can come to the conclusion that the compilation performance of vue 3.x is at least 30% higher than that of Vue 2.6. The more complex the project is, the better the compilation performance is, up to 40% ~ 50%.

App platform

The three project templates of UNI-App were continued to run on the APP platform, compiled and tested for several times, and calculated their mean values. The following data were obtained:

From the comparison data in the figure above, we can conclude that the compilation performance of App platform under Vue 3.x version is improved by nearly 50% compared with vue 2.6 version.

Although not as exciting as the 10-fold efficiency improvement of H5 platform, but nearly 50% speed increase, often develop small programs /App friends, still not enchanted?

Horizontal comparison of excellent frameworks in the industry

In addition to using different versions of UNI-App for vertical comparison, we also used Taro, an excellent cross-end framework in the industry, to create an empty project template for horizontal comparison testing.

Specific test plan:

The installationTaroThe latest CLI version used in this test is “@tarojs /Taro”: “3.3.16”
useTaro initCommand, respectivelyreact,vue,vue3Framework to create three default project templates with three project names respectivelytaro3-react,taro3-vue,taro3-vue3, as shown below:
usenpm run dev:h5, run to H5 platform for preview, record the compilation time of each preview, repeat the execution, and calculate its mean value

Taro compilation time calculation scheme:

To develop aTaroExtension plug-in, plug-in specification referenceTaro official website – Plugins
inctx.onBuildStartRecord the start time of compilation
inctx.onBuildFinishRecord the compile end time
The time difference between the two is the time consumed in the compilation process

Then use the CLI command line of uni-app to create an empty vue3.x based project template named Uni-app-vue3.

We compiled the 5 projects created above to H5 platform and small program platform respectively by using the command line of their respective frameworks, tested them for many times, and calculated their mean values.

The compile time of the same framework version on H5 platform is as follows:

As you can see from the figure, vuE3 version of UNI-App is far ahead of the pack in terms of home page build preview performance on H5 platforms.

Continue to compile to the small program platform, test for many times, find its mean, the results are as follows:

As you can see from the figure, vue3 version of UNI-App is also leading the way in compilation performance on applets.

Better running speed

In the development process, the compilation is fast. How about the performance of the software for the end user?

Let’s move on to the performance testing section.

Test plan:

Development content: develop a complex long list of the front page of micro blog mini program, supporting pull down to refresh, pull up to turn the page, like.
The interface is as follows:

Test models: Mi 10 Pro, MIUI 12.5 (development version 21.11.3), wechat version 8.0.16
Preparation: Before each test, kill each App process and empty the memory to ensure that the test machine environment is basically consistent; Each time static data is read locally, network differences are shielded.
Evaluation point: Does a component in a long list, such as a “like” component, change its “like” or “unlike” status when clicked?

Test timing method:

Select a microblog and click the “Like” button to switch the “like” status (highlighted “like”, gray “unliked”).
The like button onclick function starts the timer, and the setData callback starts the timer;

Multiple tests have been carried out on Xiaomi mobile phones, and the average results are as follows:

Record the number of	200	400	600	800	1000
vue2	30ms	43ms	56ms	72ms	90ms
vue3	8ms	9ms	9ms	8ms	9ms

As can be seen from the table:

As the page records increase,Vue 2.6Version of theuni-appThe response time of the project and the like component increases rapidly and the response becomes slower and slower;
Based on thevue 3.xtheuni-appProject, the response time of the like component has nothing to do with the number of pages, has always maintained a very high response sensitivity, performance experience is far higher thanVue 2.6Version.

From this common long-list component response experiment, vue 3.x is a much better performance experience than Vue 2.6.

Smaller code volume

The volume of code after the project is released is an important metric to consider:

H5 platform: smaller code volume, can help developers save server bandwidth and CDN traffic, can realize faster resource loading and page rendering;
Small program platform: smaller code volume, can speed up the download of small program package (may even avoid the tedious subcontracting loading), help users to enter the small program business interface faster;
App platform: smaller code volume can realize faster App launch and help users enter the App home page faster

In order to test the change of code volume after vue 3.x update, we also did two dimension tests:

Vertical comparison: choiceuni-appCommon project templates were tested on H5, small program and App platforms respectivelyVue 2.6andvue 3.xThe size of the compiled package
Horizontal comparison: Create a default project template, record its compiled package size, and use other excellent cross-end frameworks in the industryuni-appVersion comparison

Tips:

The development phase focuses on compilation speed, corresponding tonpm run devoperation
The release phase focuses on the compilation package size, corresponding tonpm run buildoperation

Uni-app vertical comparison between different versions

We reuse the three project templates of uni-app default template, UNI-Starter and Hello-Uniapp created before to test the compilation package volume of Vue 2.6 and Vue 3.x respectively.

Collection method of compilation package volume of UNI-App project: After compilation to the corresponding platform, record the size of the compiled folder.