vue 首页import加载速度问题

Question

现在主页有7个tab 然后开发人员把7个tab的内容都写在了home.vue里面 导致从第三方进入要加载8秒左右 现在项目由我接手 现在想优化进入速度 那把7个tab分别写在7个页面 然后用import引入 这个方法可行吗 类似下面的写法

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

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

Answer 1

建议引入vue-router，切换tab时切换路由，渲染不同的组件

Answer 2

o(╯□╰)o，使用懒加载，有7个tab，只加载一个tab页面不就行了，其他的点到了再加载啊。

Answer 3

<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
    }
  }