Vue performance optimization

Posted Jun 15, 20201 min read

Coding stage

  • Minimize the data in the data, the data in the data will increase the getter and setter, will collect the corresponding watcher
  • v-if and v-for cannot be used together
  • If you need to use v-for to bind events to each element, use event proxy
  • SPA page uses keep-alive cache component
  • In more cases, use v-if instead of v-show
  • The key is guaranteed to be unique
  • Use routing lazy loading, asynchronous components
  • Anti-shake, throttle
  • Import third-party modules on demand
  • Long list scrolling to the visible area for dynamic loading
  • Image lazy loading

SEO optimization

  • Pre-rendering
  • Server-side rendering SSR