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.
Hash: 30af4c4033482074a37d Version: webpack 4.44.2 Time: 6730ms
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.
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]
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.
To test web performance I used a large SiteInspector report page which renders thousands of custom Vue components.
3507ms - Scripting 1356ms - Rendering 24ms - Painting
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.
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.