vue异步组件实现组件懒加载和路由懒加载

2022-08-21 本文已影响0人书舜

vue 异步组件

在开发过程中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。

vue 以一个工厂函数，动态导入组件，异步解析组件定义的过程我们称之为异步组件。

只有在这个组件需要被渲染的时候才会触发该工厂函数，因此我们可以通过异步组件实现组件的懒加载。

vue 异步组件动态导入的方式

1. require 动态导入

这个工厂函数会收到一个 resolve 回调，这个回调函数会在从服务器得到组件定义的时候被调用。也可以调用 reject(reason) 来表示加载失败。

Vue.component(
    'async-webpack-example', 
    // 这个特殊的 `require` 语法将会告诉 webpack
    // 自动将你的构建代码切割成多个包，这些包
    // 会通过 Ajax 请求加载
    resolve => require(['./my-async-component'], resolve)
)

2. import 动态导入

可以在工厂函数中返回一个 Promise，我们可以这样使用动态导入：

Vue.component(
    'async-webpack-example',
    // 这个动态导入会返回一个 `Promise` 对象。
    () => import('./my-async-component')
)

当使用局部注册的时候，也可以直接提供一个返回 Promise 的函数：

new Vue({
    // ...
    components: {
        'my-component': () => import('./my-async-component')
    }
})

vue组件懒加载和路由懒加载

背景

当打包构建应用时，JavaScript 包会变得非常大，造成进入页面时，需要加载过多的内容，影响首屏加载速度。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，提升首屏加载速度。

定义

懒加载也叫延迟加载或按需加载，即在需要的时候的时候进行加载。
组件懒加载，即在需要的时候，加载该异步组件。
路由懒加载，即在路由激活时，加载该路由配置下相应的异步组件。
因此我们可以通过vue异步组件实现组件懒加载和路由懒加载。

具体实现

1. require 实现懒加载

// 将原始加载方式
// import UserDetails from './views/UserDetails'
// 替换成
const UserDetails = resolve => require(['./views/UserDetails'], resolve);

2. import 实现懒加载

完整示例代码如下

import Vue from 'vue';
import Router from 'vue-router';
// 将原始加载方式
// import UserDetails from './views/UserDetails'
// 替换成
const UserDetails = () => import('./views/UserDetails');

Vue.use(Router);

export default new Router({
    // ...
    routes: [
        {
            path: '/users/:id',
            component: UserDetails
        }
    ]
});

使用webpack

有时候我们想把某个路由下的所有组件都打包在同一个异步块 (chunk) 中。可以使用 webpackChunkName 注释语法来提供命名 chunk，webpack 会将相同 chunk name 的组件组合到同一个异步块中。

const UserDetails = () =>
  import(/* webpackChunkName: "group-user" */ './UserDetails.vue')
const UserDashboard = () =>
  import(/* webpackChunkName: "group-user" */ './UserDashboard.vue')
const UserProfileEdit = () =>
  import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue')

关于import和require的区别

require 是 CommonJs 的语法，是动态加载，在运行时加载模块里的所有方法。require 导出是值的拷贝，引入的是的是整个模块里面的对象。
import 是 ES6 的语法标准，是静态加载，编译的时候调用，不管在哪里引用都会提升到代码顶部。import 导出的是值的引用，可以按需引入模块里面的对象。

总结

组件懒加载，即在需要的时候，加载该异步组件。路由懒加载，即在路由激活时，加载该路由配置下相应的异步组件。
CommonJs 规范的 require 可以实现组件和路由的懒加载，ES6 语法标准的 import 也可以实现。
组件和路由的懒加载，一般用于首屏优化，不立刻请求资源，待首屏加载完毕或者按需响应时再加载资源。可以减少首屏加载用时，减少用户等待时长，提升用户体验。

vue异步组件实现组件懒加载和路由懒加载