原文地址:Vue 异步组件&路由懒加载
目录
异步组件
异步组件介绍
在开发大型项目的时候,我们会把大型项目根据组件分割为小块代码,然后异步加载代码块,这样可以让首屏部分代码块优先加载,加快首屏渲染速度,其他代码块在需要的时候再加载,加载过的代码块会被缓存起来,以便复用重新渲染。
异步组件声明
异步组件声明有两种方式,通过工厂函数
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')
}
]