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

Understanding Idiomatic React – Joe Savona, Mofei Zhang, React Advanced 2023

floy: Introduction to Postgres Query Planning

RailsConf 2023 - Merged PRs: An Untapped Resource for Practice and Exploration by Thomas Countz

RustConf 2023 - Using Rust and Battlesnake to never stop learning

DjangoCon Europe 2023 | Building and scaling a live event platform with django-channels

IntelliJ IDEA Tips & Tricks by Anton Arhipov

Power Fixing React Performance Woes – Josh Goldberg, React Advanced 2023

CakePHP Test Fixture Factories | Juan Pablo Ramirez