异步组件

原意：什么时候使用就什么时候加载。

例如：项目中使用echarts、代码编辑器等，如果不异步加载，那么打包的bundle就会非常大，首页加载会很慢很慢！

常见使用方法

在组件的components中引入组件

renderEcharts: （）=> import('component/RenderEcharts.vue')

在vue-router【路由懒加载】

const rendreEcharts = （）=> import('component/RenderEcharts.vue')

在vue-router【路由懒加载】

const rendreEcharts = （）=> import('component/RenderEcharts.vue')

addRouter动态加载异步组件

应用：通过接口动态生成vue-router的路由表，配合权限食用效果更佳

// test.json
[
  {
    "file": "./test"
  }
]

// Demo
this.$axios.get('http://127.0.0.1:8081/test.json')
  .then((data) => {
    let filePath = data[0].file
    router.addRoutes([{
      path: '/test',
      component: () => import(`${filePath}.vue`) // 动态加载组件【注意：只会打包当前目录下的所有vue文件】
      // component: () => import(`@/pages/${filePath}.vue`) // webpack会打包pages目录下的所有vue文件（适用于加载其他目录的vue文件）
    }])
    this.$router.push('/test')
  })