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 – this might be explained by Vue 3 template compiler whitespace trimming which is expensive.
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, but in terms of web performance, Vue.js design has already been near its peak since v2.
from Tumblr https://generouspiratequeen.tumblr.com/post/642187540463566848
