Vue 3 real-life performance

Recently, I moved SiteInspector to Vue 3 so I was curious to see if the app had any improvements in terms of efficiency and performance.

Build speed

Vue 2

Hash: 30af4c4033482074a37d
Version: webpack 4.44.2
Time: 6730ms

Vue 3

Hash: 36b518e42dad63f1a2cd
Version: webpack 4.44.2
Time: 7871ms

The measured build speed is represented by the fastest build time of Vue modules (css/scss/less modules were removed from the bundle).

Vue 3 app build didn't reach the same speed as Vue 2.

Bundle size

Vue 2

                                    Asset       Size  Chunks                                Chunk Names
            js/ui-c0266b6bd5a26196d002.js    413 KiB       0  [emitted] [immutable]  [big]  ui
         js/ui-c0266b6bd5a26196d002.js.br   91.5 KiB          [emitted]
         js/ui-c0266b6bd5a26196d002.js.gz    109 KiB          [emitted]
        js/ui-c0266b6bd5a26196d002.js.map   1.58 MiB       0  [emitted] [dev]               ui
     js/ui-c0266b6bd5a26196d002.js.map.br    335 KiB          [emitted]              [big]
     js/ui-c0266b6bd5a26196d002.js.map.gz    407 KiB          [emitted]              [big]        

Vue 3

                                    Asset       Size  Chunks                                Chunk Names
            js/ui-34caf8d12584e4e16014.js    432 KiB       0  [emitted] [immutable]  [big]  ui
         js/ui-34caf8d12584e4e16014.js.br   96.4 KiB          [emitted]
         js/ui-34caf8d12584e4e16014.js.gz    116 KiB          [emitted]
        js/ui-34caf8d12584e4e16014.js.map    1.8 MiB       0  [emitted] [dev]               ui
     js/ui-34caf8d12584e4e16014.js.map.br    372 KiB          [emitted]              [big]
     js/ui-34caf8d12584e4e16014.js.map.gz    460 KiB          [emitted]              [big]

Vue 3 app weight is 19kb more. A smaller bundle size could be achieved with Rollup tree-shaking, but the default Vue webpack package weighed slightly more, as well as Vue 3 Vuex and Router packages.

Web performance

To test web performance I used a large SiteInspector report page which renders thousands of custom Vue components.

Vue 2

3507ms - Scripting
1356ms - Rendering
24ms   - Painting

Vue 3

3707ms - Scripting
1252ms - Rendering
26ms   - Painting

Vue 3 didn't show a noticeably faster rendering speed - it took ~5 seconds to render the report both in Vue 2 and 3.

Summary

Vue 3 didn't improve app efficiency and performance for SiteInspector. In general, web performance remained on the same level. Vue 3 showed bigger progress towards making better toolings and maintainable code.

Comments

[Patrik]

a) how many tries did you do to ensure the results were consistent for your test? It's a very important detail since plenty of things can cause delays on each run (perhaps your antivirus decided to do some heavy IO/CPU stuff which skewed your results, or automatic updates of some software on your machine)

b) the assumption that it's "near its peak" isn't really supported by anything you've provided here, not nearly enough information is provided to prove this statement. You would have to have some fairly in-depth review of what is going on "under the hood" to identify potential parts of the code where time is "wasted" because of sub-optimal code to make such claims.

• Is it slightly slower than before? Yes.
• Does the decrease in performance outweigh the improvements for the developers/end-users? <- Here is where you could have spent more time going in-depth to provide the potential reader more value. The current material you've written merely mention that there has been work done in that department, what I would have liked to see here is a lot more of that. Perhaps show code-comparisons and explain why v3 is better, and also their corresponding performance differences?

[Pete Matsyburka]

Thanks for the feedback, all those are good points.

a) The measured build speed is represented by the fastest build time among 10 runs.
b) The purpose of this test was to measure the overall real-life performance of Vue app - not some synthetic benchmark of a single line template rendered thousands of times in a loop.

So this answers the question: "Should I move my app to Vue 3 for the sake of web performance improvements" and the answer would be - probably you shouldn't unless you want better typescript support and tree-shaking.

[Marius Zaharie]

I am not a Vue.js dev but as far as I heard in Vue3 you need to actually use the Vue3 APIs in order to gain those performance boosts. What are those perf critical APIs?

[Dave Stewart]

Thanks! Really useful article. Been wondering about this for a while.