vue-异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

异步组件用法

1、require语法

const Home=function (resolve){
    // 这个特殊的 `require` 语法将会告诉 webpack
    // 自动将你的构建代码切割成多个包，这些包
    // 会通过 Ajax 请求加载
    require(['./pages/Home'],resolve)
}

2、import语法

const Home=() => import('./pages/Home')

处理加载状态

function lazyLoadView (AsyncView) {
  const AsyncHandler = () => ({
    component: new Promise((resolve) => {
      setTimeout(() => {
        resolve(AsyncView)
      }, 1000)
    }),
    loading: require('@/components/Loading.vue').default,
    error: require('@/components/Error.vue').default,
    delay: 500,
    timeout: 1000
  })
  return Promise.resolve({
    functional: true,
    render (h, { data, children }) {
      return h(AsyncHandler, data, children);
    }
  })
}
const Home= () => lazyLoadView(import('@/pages/Home'))