Vue 组件的异步加载

Question

首先要区分两个概念，动态加载 和 异步加载。

动态加载即 通过 <componenet :is="activeComponent"></component> 的方式，动态切换渲染的组件。

异步加载即 通过 Vue/ES6/Webpack提供的语法，按需加载组件（表现为单个的 js），异步加载具体有三种方式：

Vue 的异步组件加载

{
    ...
    component: resolve => require(['../components/PromiseDemo'], resolve)
    ...
}

ES6 的 import

{
 ...
 component: () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')
 ...
}

Webpack 提供的 require.ensure

{
 ...
 component: r => require.ensure([], () => r(require('../components/PromiseDemo')), 'demo')
 ...
}