Aurélie Violette - Developing Weweb: VueJs Performance optimization on a large webapp

Develop VueJS performance optimization strategies for large webapps, avoiding premature optimization and leveraging memoization, lazy-loading and activable effects.

Key takeaways
  • Vue.js performance optimization is a crucial aspect, especially in large web apps.
  • Don’t optimization prematurely, it may come with a cost.
  • Understand the basics of Vue.js, like computed and watcher.
  • Use a technique called memoization to cache computed results.
  • Use lazy-ref to create a reference and avoid repeated computation.
  • Use Vememo to gather effects and release them when not needed.
  • Use activable effects to create a scope and release it when not needed.
  • Use a combination of computed and watcher to optimize performance.
  • Debugging is crucial, use the Vue.js dev tool and the performance tab.
  • Understand the browser rendering and rendering cycles.
  • Use debugging techniques like console.log or debuggers to identify performance issues.
  • Use the computed property to detect changes in dependencies.
  • Use the watcher property to detect changes in dependencies.
  • Use the richter function to compute the size of an element.
  • Use the resize observer to observe the size of an element.
  • Use the scroll position to position an element.
  • Use a composable factory to create reusable and composable code.
  • Use the “unmount” hook to release resources.
  • Use the “disposed” function to release resources.
  • Use the “watch” option to watch for changes in dependencies.
  • Use the “computed” option to compute properties.
  • Use the “ref” option to create a reference.
  • Use the “lazy-ref” option to create a reference that is only computed when needed.
  • Use the “Vememo” option to gather effects and release them when not needed.
  • Use the “activable effects” option to create a scope and release it when not needed.
  • Sometimes, it’s better to sacrifice readability for performance.
  • Don’t prematurely optimize, it may come with a cost.
  • Use debugging techniques to identify performance issues.
  • Use Vue.js dev tool and the performance tab to optimize performance.
  • Create reusable and composable code using the composable factory.
  • Use the “unmount” hook to release resources.
  • Use the “disposed” function to release resources.
  • Use the “watch” option to watch for changes in dependencies.
  • Use the “computed” option to compute properties.
  • Use the “ref” option to create a reference.
  • Use the “lazy-ref” option to create a reference that is only computed when needed.
  • Use the “Vememo” option to gather effects and release them when not needed.
  • Use the “activable effects” option to create a scope and release it when not needed.

More talks

Performance tuning for Azure Cosmos DB - Hasan Savran - NDC Oslo 2024

Using Go to Scale Audit Logging at Cloudflare - Arti Phugat, Cloudflare

Talks - Sydney Runkle: Pydantic Power-up: Performance Tips for Lightning-Fast Python Applications

Rust Before Main - Ryan Levick - Rust Linz, July 2022

Managing your Tuple Graveyard - Chelsea Dole

Ask for the Unreasonable...and then Get Out of the Way • Andrew Harcourt • YOW! 2018

EH21 - Komischen Code schreiben der schnellen Code schreibt

Creating technical leadership in context