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 = () => ({
  // 需要加载的组件 (应该是一个 `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')