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.

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

More talks