vue 高级特性 异步组件

异步组件

1）使用import 函数

2）异步组件，加载体积大的组件如富文本编辑器，echarts等，性能优化的场景之一   

ps:查看效果打开控制台 network中

<template>
  <!-- rights组件 -->
  <div class="header">
    <Inp v-if="show"></Inp>
    <button @click="show=true">点击确认异步加载</button>
    <p>异步加载组件：是使用的时候才会加载组件，适合体积大的组件比如富文本编辑器，echarts等</p>
    <p>同步加载组件：是打包的时候就已经加载了</p>
  </div>
</template>

<script type="text/ecmascript-6">
// 这里就是同步加载组件
// import Inp from './inp'
export default {
  data() {
    return {
      show: false
    }
  },
  components: {
    Inp: ()=> import('./inp')
  }
}
</script>

<template>
  <!-- inp组件 -->
  <div>
    this is inp
  </div>
</template>

<script>
export default {
}
</script>