createApp() 传入一个对象 App，这个对象本质上是一个组件（App.vue）即应用程序的根组件。

代码分包

假设项目中有一个 utils 目录用于存放我们编写的 js 文件。
默认导入方式：会将 main.js 中我们编写的依赖打包到一个 app.js 中

// main.js
import { crreateApp } from 'vue'
import App from './App,vue'
// 默认导入方式
import { sum } from './utils/math'

const app = createApp(App)
app.mount('#app')

单独打包方式：通过 import 函数导入的模块，后续 webpack 对其进行打包时会进行分包操作。

// main.js
import { createApp } from 'vue'
import App from './App.vue'

// 单独打包方式
import('./utils/math').then(res => {
  res.sum(10, 20)
})

const app = createApp(App)
app.mount('#app')

异步组件定义及使用

在大型应用中可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。一般我们会使用路由懒加载方式进行分包，但如果想将一个跟路由没有关系的组件进行分包，可以使用以下方式。

全局异步组件

app.component('async-my-title', Vue.defineAsyncComponent(()=> {
  return new Promise((resolve, reject)=> {
    setTimeout(()=> {
      resolve({
        template:`<div>this is an async component</div>`
      })
    }, 4000)
  })
}))

局部异步组件

import { defineAsyncComponent } from 'vue'
const AsyncHome = defineAsyncComponent(()=> import('./AsyncHome.vue'))

export default {
  components:{
    AsyncHome
  }
}

高级异步组件

const LoadingComp = {
  template:'<div>loading</div>'
}
const ErrorComo = {
  template:'<div>error</div>'
}

const AsyncComp = ()=>({
  component:import('./components/HelloWorld.vue'),
  loading:LoadingComp, // 加载异步组件时要使用的组件
  error:ErrorComp, // 加载失败时要使用的组件
  delay:200, // 在显示loadingComponent之前等待多长时间
  timeout:1000, // 加载组件的时间超过设定值将显示错误组件
  suspensible:false // 定义组件是否可挂起
})

Vue.component('HelloWorld', AsyncComp)

// 使用异步组件
<component is='HelloWorld'></component>

查看 defineAsyncComponent API 详细解释