Vue 3 real-life performance

Vue 3 real-life 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 – 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s