Vue performance tricks

Guillaume Chau

@Akryum

github.com/Akryum

Not fast enough?

The most important thing

(among others)

1. Templates & Rendering

Static Tree Hoisting

Demo

Static Tree Hoisting

ON

OFF

Static binding

Demo

Static binding

ON

OFF

Child component caching

Demo

Child component caching

ON

OFF

2. Data

Local variable

Demo

Local variable

ON

OFF

Vuex commit splitting

Perceived performance

Demo

Vuex Commit Splitting

Vuex Commit Splitting

OFF

Split 1000

Split 100

Non-reactive data

Demo

Non-reactive data - No Split

ON

OFF

Non-reactive data - Split 1000

ON

OFF

3. Virtual scroller

Non-reactive data optimization OFF

Demo

Data optimization OFF

VScroll ON

VScroll OFF

Non-reactive data optimization ON

Demo

Data optimization ON

VScroll ON

VScroll OFF

Interacting with the list

Demo

Interacting (Data Opti ON)

VScroll ON

VScroll OFF

THANKS

Questions?

https://github.com/Akryum/vue-perf-tests

https://github.com/Akryum/vue-template-explorer

Guillaume Chau

@Akryum

github.com/Akryum

[EN] Vue performance tricks

By Guillaume Chau

[EN] Vue performance tricks

Learn new tricks to improve the performance of your Vue.js app!

  • 7,922