全部内容
- 异步组件
- 路由懒加载
- 把组件按组分块
异步组件
异步组件介绍
在开发大型项目的时候,我们会把大型项目根据组件分割为小块代码,然后异步加载代码块,这样可以让首屏部分代码块优先加载,加快首屏渲染速度,其他代码块在需要的时候再加载,加载过的代码块会被缓存起来,以便复用重新渲染。
异步组件声明
异步组件声明有两种方式,通过工厂函数
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 = () => ({
// 需要加载的组件 (应该是一个 `Promise` 对象)
component: import('./MyComponent.vue'),
// 异步组件加载时使用的组件
loading: LoadingComponent,
// 加载失败时使用的组件
error: ErrorComponent,
// 展示加载时组件的延时时间。默认值是 200 (毫秒)
delay: 200,
// 如果提供了超时时间且组件加载也超时了,
// 则使用加载失败时使用的组件。默认值是:`Infinity`
timeout: 3000
})
路由懒加载
路由懒加载介绍
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
结合 Vue 的异步组件 (opens new window)和 Webpack 的代码分割功能 (opens new window),轻松实现路由组件的懒加载。
通过工厂函数返回一个Promise对象,异步加载组件
import() 返回一个promise对象
const Foo = () =>
Promise.resolve({
/* 组件定义对象 */
})
那么通过工厂函数返回
var myComponent = () => import('./my-component')
路由引入
const routes = [
{
name: "MyCompoent",
path: 'my-compoent',
component: myComponent
}
]
把组件按组分块
有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk (opens new window),一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')