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.
Top comments (4)
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.
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.
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?
Thanks! Really useful article. Been wondering about this for a while.