increase the speed of vuejs spa or optimise the performance

 not register component or packages are gllobally means at main.js

whatever required at that indivudal file only register that paakge locally

code splitting

router.js

store.js

lazyload not import all router files or compoiente

import where ver required

v-if use tis condition 

data store in vuex

use v-if and v-show we can optimise

use comments at router while importing component

lazy loading at router

const routes = [
  {
    path: '/about',
    component: () => import('./components/About.vue')
  }
]

lazy loading 

{

path: '/one',

name: 'One',

props:true,

component: () =>

import ("./components/SamplePage")

}

lazy loadig import componen t

import { defineAsyncComponent } from 'vue'

export default {
  setup() {
    const About = defineAsyncComponent(() => import('./components/About.vue'))
    return { About }
  }
}

=

const axiosPromise = import('axios');

axiosPromise.then((axios) => {

// Use Axios here

axios.get('https://api.example.com/data')

.then(response => {

console.log(response.data);

})

.catch(error => {

console.error('Error fetching data:', error);

});

});

==

https://dev.to/delia_code/how-to-optimize-performance-in-vuejs-applications-beginner-to-advanced-guide-53db?fbclid=IwZXh0bgNhZW0CMTEAAR1mbBm0a7r8KDMkNG53Hruo9uQyIiTybR6dZ8aLIMItmvn_WLkukPK3a9A_aem_ARVRNS_JEb7ooNp17vB_coWMRNqGo0mwfb2cv-pZYyzz6A6t4vcN26yUoYFgog7uED6luEAOYA1xO15ocPWIWLVq

using debouncing an dthrollting

wait upto some time , giving search query with in less time, we ahve to use some delay in response

import { ref } from 'vue'
import debounce from 'lodash/debounce'

export default {
  setup() {
    const query = ref('')
    const search = debounce((value) => {
      // Perform search operation
      console.log(value)
    }, 300)

    return { query, search }
  }
}

==

use reactive reference wisely

if overused it is performance bottle neck

import { ref, computed } from 'vue'

export default {
  setup() {
    const items = ref([1, 2, 3, 4, 5])
    const evenItems = computed(() => items.value.filter(item => item % 2 === 0))

    return { items, evenItems }
  }

instead of rendering all list at at time 

we can  use virtual scrolling 

<template>
  <virtual-list :size="50" :remain="10" :items="items">
    <template v-slot="{ item }">
      <div class="item">{{ item }}</div>
    </template>
  </virtual-list>
</template>

<script>
import { ref } from 'vue'
import VirtualList from 'vue-virtual-scroll-list'

export default {
  components: { VirtualList },
  setup() {
    const items = ref([...Array(1000).keys()])

    return { items }
  }
}
</script>

code splitting and bundling 

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
}

=