Vue homepage import loading speed problem

now there are seven tab on the home page, and the developer wrote all the contents of the seven tab in the home.vue, resulting in about 8 seconds of loading from a third party. Now I am in charge of the project, and now I want to optimize the entry speed. Is it possible to write the seven tab on seven pages and introduce this method with import? it"s similar to the following

.
<ceshi></ceshi>
<paixu></paixu>

import paixu from "./paixu.vue"
import ceshi from "./ceshi.vue"
export default {
  components:{
    paixu,
    ceshi
  },
Mar.06,2021

o (lazy-loaded) o, use lazy loading, there are seven tab, to load only one tab page is not on the line, the rest of the point to load ah.


it is recommended to introduce vue-router, to switch routes when switching tab, and render different components


<component :is="componentName"></component>

import paixu from "./paixu.vue"
import ceshi from "./ceshi.vue"
export default {
  data() {
      return { componentName:'paixu' }
  },
  components:{
    paixu,
    ceshi
  },
  methods:{
    handleTabClick(tabName){
        this.componentName = tabName
    }
  }
Menu