异步组件
异步组件介绍
在开发大型项目的时候，我们会把大型项目根据组件分割为小块代码，然后异步加载代码块，这样可以让首屏部分代码块优先加载，加快首屏渲染速度，其他代码块在需要的时候再加载，加载过的代码块会被缓存起来，以便复用重新渲染。
异步组件声明
异步组件声明有两种方式，通过工厂函数
Vue.component('async-example', function (resolve, reject) {
resolve({
template: '<div>hello vue !</div>'
})
})
也可以通过webpack 的 code-splitting 功能一起配合使用：
Vue.component('async-wepack-example', function (resolve) {
// require会告诉webpack将你的代码切割成多个包，然后通过ajax加载
require(['./my-async-component'], resolve)
})
还可以通过工厂函数，返回一个promise对象
const Foo = () => Promise.resolve({
template: '<div>hello vue !</div>'
})
或者通过 import()
Vue.component('async-wepack-example', () => import('./my-async-component'))
局部组件注册异步组件
new Vue({
components: {
myComponent: () => import('./my-async-component')
}
})
总结通过工厂函数的resolve或者返回一个Promise对象来声明异步组件
高级异步组件
const asyncComponent = () => ({
component: './my-async-component',
delay: 200, // 延迟加载，默认200毫秒
error: errorComponent, // 加载失败显示组件
loading: loadingComponent, // 加载时使用组件
timeout: 2000 // 超时时间，默认 Infinity
})
路由懒加载
路由懒加载介绍
通过异步组件和webpacm代码分割，实现路由懒加载，按需加载，提升路由页面加载速度。
路由懒加载方法
通过工厂函数返回一个Promise对象，异步加载组件
import() 返回一个promise对象
import('./my-component')
那么通过工厂函数返回
var myComponent = () => import('./my-component')
路由引入
const routes = [
{
name: "MyCompoent",
path: 'my-compoent',
component: myComponent
}
]
把组件按组分块
如果我们想把一些组件和某一个子组件一起打包为代码块，通过添加注释的方式即可
const routes = [
{
name: "MyCompoent",
path: 'my-compoent',
component: () => import(/* webpackChunkName: 'group-btn' */ './my-component')
}
]
