3.2.5 路由懒加载

在打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果能把不同路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应组件，就比较高效了。

结合 Vue 的异步组件和 Webpack 的代码分割功能，可以轻松实现路由组件的懒加载。

提示

异步纽件：
在大型应用中，可能需要将应用拆分为多个小的模块，按需从服务器下载。为了进一步简化，Vue.js 允许将组件定义为一个工厂函数，异步地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数，并且把结构缓存起来，用于后面的再次渲染。

首先，可以将异步组件定义为返回一个 Promise 的工厂函数（该函数返回的 Promise 应该是 resolve 组件本身）。

const Hzh = () => Promise.resolve({/* 组件定义对象 */})

其次，在 Webpack 中，可以使用动态 import 语法来定义代码分块点（split point）。

import('./Hzh.vue') // 返回 Promise

结合这两点 ，就是定义一个能够被 Webpack 自动进行代码分割的异步组件的过程。

const Hzh = () => import('./Hzh.vue')

在路由配置中不需要改变，只需要像往常一样使用 Hzh 组件即可。

const router = new VueRouter({
    routes: [
        { path:'./hzh, component: Hzh'}
    ]
})

通过懒加载不会一次性加载所有组件，而是访问到组件的时候才加载。这样的处理对组件比较多的应用会提高首次加载速度。

示例 8

// 引入组件 header
const Header = () => import('@/components/header');
// 引入页面中的首页
const Index = () => import('@/pages/index');
const Login = () => import('@/pages/login');