Vue 3 real-life performance

Pete Matsyburka — Wed, 03 Feb 2021 13:20:40 +0000

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.

You can't just migrate to Vue 3 (now)

Pete Matsyburka — Tue, 02 Feb 2021 14:02:10 +0000

Recently I moved SiteInspector open-source app to Vue 3 and discovered that Vue 3 template compiler has a serious flaw in the default whitespace trimming strategy which makes it unreasonably hard to upgrade existing Vue.js apps.

Vue 3 template compiler removes whitespaces before HTML tag if it starts with a new line in the template.
This "feature" eliminates visible margins between UI components and there is no way to change this via compiler settings.

Margins between buttons are missing as a result of Vue 3 whitespace trimming strategy.

<template>
  <a href="/">Link1</a>
  <a href="/">Link2</a>
  <a href="/">Link3</a>
</template>

Vue 3 template compiler doesn't respect new lines and removes whitespaces from the rendered HTML.

<a href="/">Link1</a><a href="/">Link2</a><a href="/">Link3</a>

When the correct "trimmed" output should be the following:

<a href="/">Link1</a> <a href="/">Link2</a> <a href="/">Link3</a>

So if you take a simple HTML page and render it via Vue 3 template compiler you will see a different picture on your screen - all buttons and links will be smashed together and won't move to the next line in the parent container on a smaller mobile screen.

The best way to fix it for SiteInspector was to add mandatory whitespaces via text interpolation:

<template>
  <a href="/">Link1</a>
  {{ ' ' }}
  <a href="/">Link2</a>
  {{ ' ' }}
  <a href="/">Link3</a>
</template>

Hopefully, this issue will be resolved soon so {{ ' ' }} can be removed with a single grep command.

DEV Community: Pete Matsyburka

Vue 3 real-life performance

Build speed

Vue 2

Vue 3

Bundle size

Vue 2

Vue 3

Web performance

Vue 2

Vue 3

Summary

You can't just migrate to Vue 3 (now)