With vue3 and vite two-way blessing, the performance of uni-app is improved again

uni-app to vue3 & Vite is a gradual process:

September 2020: The applet platform supports vue3 development, and the applet platform compiler still uses webpack;
May 2021: The H5 platform supports vue3 development, and the H5 platform compiler is upgraded to Vite;
August 2021: The App platform supports vue3 development, and the App platform compiler is upgraded to Vite;
November 2021: The Mini Program platform compiler will be upgraded to Vite;

So far, uni-app Vite compilation and Vue 3.x running on all platforms.

So, what improvements did this year-long major version upgrade uni-app

It's time to wrap up (show) a wave.

The new version of uni-app framework has made three major improvements:

Rewrite the framework kernel: Rewrite built-in components and APIs vue3 + ts tree-shaking ;
Added support for Vite build tools, enabling instant preview on the H5 platform;
Added support for Vue3.x to achieve more flexible development methods and higher running performance;

Based on these three improvements, uni-app project received more with less four major benefits:

More syntax support, combined API support, business focus, and higher development efficiency;
Faster compilation speed, the H5 platform is accelerated by ten times, and the applet and App are accelerated by more than 30%;
Better running performance, faster user response and better experience;
Smaller code size, slimming down by more than 30%, saving volume and traffic

more syntax support

The new version of uni-app supports the Vue 3.x framework and supports combined APIs, enabling more focused business development.

Some new features of Vue 3.x, uni-app have also been fully supported, such as:

Support <script setup>
Support <style scoped> , <style module> , State-Driven Dynamic CSS(v-bind)
Support jsx , tsx (h5, app platform support, applet does not support)

In addition, on the Mini Program platform, the new version uni-app also expands more syntax, such as:

More complete template syntax support (such as class , style support functions, variables, etc., no longer limited to arrays, object types)
More complete props support (like transfer functions)
Better slot support (like scoped slots)

faster compilation

In the daily work of developers, the most boring thing is to wait for the compilation and build.

There is also a discussion thread on “What do programmers do when they are waiting for compilation?”, which shows how awkward and boring the compilation time is for developers.

uni-app After upgrading vue3 & Vite , how much improvement is there in compilation time? How many benefits does it bring to developers? We arrange real tests to speak with data.

Test environment description:

硬件：RedmiBook 14 二代
处理器：Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz 
内存：16.0 GB
操作系统：Windows 11 专业版 64 位操作系统

Regarding compilation speed, we made a comparison in two dimensions:

Vertical contrast: Pick uni-app common project template, H5, applets, App platform, were tested vue 2.6 and vue 3.x compile time
Horizontal comparison: Use other excellent cross-end frameworks in the industry, create a default project template, record its compilation time, and uni-app with the vue 3.x version of 061dd00d19fa6f

Vertical comparison of historical versions of uni-app

We choose uni-app default template, uni-starter , hello-uniapp three project templates, and test the compilation time of vue 2.6 and vue 3.x

The collection method of uni-app project compilation time:

vue 2.6 build time = webpack's stats.endTime - stats.startTime
vue 3.x version compilation time = global.__vite_start_time = performance.now() is recorded at the entry of the build tool, when the build tool is compiled: performance.now() - global.__vite_start_time

`H5 platform`

uni-app the three project templates of 061dd00d19fbc3 on the H5 platform, compile and test multiple times, and obtain the following data after calculating the average value:

From this, we can observe:

In the vue 2.6 environment, as the complexity of the project increases, the compilation time required for the H5 homepage preview will increase linearly; this is because in the vue 2.6 version, although only the homepage is previewed, webpack will still be used to compile the entire project resources; Complex, the longer the compilation time;
In the vue 3.x environment, the compilation time of the H5 homepage preview is also related to the project complexity, but the increase is not large; this is because in the vue 3.x version, using Vite to build, when previewing the homepage, only the homepage and the resources it depends on are compiled, not Compile other page resources.

By comparison chart, we can intuitively conclude: vue 3.x Home compile time under the circumstances, averaging less than vue 2.6 one-tenth in the environment.

In other words, vue 3.x version, the first page compilation speed under the vue 2.6 version is ten times more efficient by .

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

Using native ESM files, without packaging, to achieve extremely fast service startup;
Preview (run) using esbuild as a packaging tool, compared to vue 2.6 at ambient webpack , to build 10 to 100 times faster (this is not our exaggerate, see esbuild )

The spirit of this ten times the efficiency gains , small partners do not hurry to try to get started?

`Mini Program Platform`

uni-app the three template projects of 061dd00d19fe60 to the applet platform, compile and test multiple times, and obtain the following data after calculating the average value:

From the graph comparing the data, we can conclude: applet platform, vue 3.x run the compiled under version, compared to vue 2.6 version, compiler performance improvements of at least 30%; and the more complex the project, the compiler will improve performance, you can achieve 40% ~ 50%.

`App platform`

Continue to run the three project templates of uni-app to the App platform, compile and test multiple times, and obtain the following data after calculating the average value:

From the graph comparing the data, we can conclude: App platform, vue 3.x run the compiled under version, compared to vue 2.6 version, compiler performance nearly 50%.

Although it is not as exciting as the ten-fold increase in efficiency of the H5 platform, the speed has increased by nearly 50%. Friends who often develop small programs/Apps are still not interested?

`Horizontal comparison of excellent frameworks in the industry`

In addition to using different versions of uni-app for vertical comparison, we also use the industry's excellent cross-end framework Taro to create empty project templates for horizontal comparison tests.

Specific test plan:

Install Taro , the version used in this test is "@Tarojs/Taro": "3.3.16"
Use Taro init command, were selected react , vue , vue3 framework, create three default project template, name three projects were taro3-react , taro3-vue , taro3-vue3 , as shown below:
Use npm run dev:h5 , run to the H5 platform for preview, record the compilation time of each preview, repeat the execution, and find the average

About the calculation scheme of Taro

Develop a Taro extension plug-in, the plug-in specification refers to Taro official website - plug-in function
Record start compile time in ctx.onBuildStart
Record compile end time in ctx.onBuildFinish
The time difference between the two is the time consumed by the compilation process

Then use uni-app of cli command line, created based on vue3.x empty project template, name the project uni-app-vue3 .

We use the command lines of their respective frameworks to compile the 5 projects created above to the H5 platform and the applet platform respectively, test them multiple times, and obtain the average value.

The compilation time of the same framework version on the H5 platform, the results are as follows:

As can be seen from the figure, uni-app of vue3 version Home compiled preview performance on H5 platform is far ahead. How far is this far? Let’s put it this way, you have compiled it 20 times, and the first time of friends and merchants is not finished yet.

Continue to compile to the applet platform, test multiple times, and find the average value. The results are as follows:

As can be seen from the figure, uni-app of vue3 version, compiler performance on a small platform program is far ahead of the distant nor near.

`better running speed`

The development process has been compiled quickly. How about the running performance of the end-user-oriented software?

We enter the performance testing chapter.

Test program:

Development content: Develop a complex long list imitating Weibo applet homepage, support pull-down refresh, pull-up page turning, and like.
The interface is as follows:
Test model: Xiaomi Mi 10 pro, MIUI 12.5 (21.11.3 development version), WeChat version 8.0.16
Preparations: Before starting the test each time, kill each App process and clear the memory to ensure that the test machine environment is basically the same; read static data from the local each time to shield network differences.
Evaluation point: For a component in a long list, such as the like component, can the unliked and liked statuses be modified in time when clicked?

Test timing method:

Select a microblog and click the "Like" button to switch the like status (liked highlighted, unliked gray),
The like button onclick function starts timing, and the setData callback function starts timing;

Conduct multiple tests on Xiaomi mobile phones and find the average value. The results are as follows:

Number of records	200	400	600	800	1000
vue2	30ms	43ms	56ms	72ms	90ms
vue3	8ms	9ms	9ms	8ms	9ms

From the table it can be seen that:

With the increase of page records, the uni-app vue 2.6 version, the response time of the like component increases rapidly, and the response becomes slower and slower;
Based vue 3.x of uni-app project, the response time components like nothing to do with the number of pages, has maintained a high response sensitivity, performance experience is much higher than vue 2.6 version.

From this common long list component response experiment, vue 3.x is much higher than that of vue 2.6 version.

`smaller code size`

The code volume after the project is released is a very important indicator to consider:

H5 platform: Smaller code size can help developers save server bandwidth and CDN traffic, and can achieve faster resource loading and page rendering;
Mini Program Platform: Smaller code size, which can speed up the download of Mini Program packages (may even avoid the cumbersome loading of sub-packages), helping users to enter the Mini Program business interface faster;
App platform: Smaller code size, enabling faster app startup and helping users enter the app home page faster

In order to test the changes in code size after the new version of vue 3.x

Vertical contrast: Choose uni-app common project template, H5, applets, App platform, were tested vue 2.6 and vue 3.x compile the package size
Horizontal comparison: Use other excellent cross-end frameworks in the industry, create a default project template, record its compiled package size, and uni-app version

Tips：

The development stage focuses on the compilation speed, corresponding to the npm run dev operation
The release stage focuses on the size of the compiled package, corresponding to the operation of npm run build

`Vertical comparison of different versions of uni-app`

We reused the previously created uni-app default template, uni-starter and hello-uniapp three project templates to test the compiled package volume of vue 2.6 and vue 3.x

uni-app project compilation package volume collection method: After compiling to the corresponding platform, record the size of the compiled folder.