Vue中的异步组件

特别声明，本文根据@Alex Jover Morales的《Async Vue.js Components》一文所整理。

随着应用程序愈来愈大，你开始考虑优化应用程序，使其变得更快。在此过程当中，你可能使用了拆分代码和延迟加载这两种方法，它们经过将代码块的加截推迟到须要的时候加载，从而使应用程序的初始包变得更小。

延迟加载对于应用程序路由有很大的意义，而且有很大的影响，由于每一个路由都是应用程序的不一样部分。

延迟加载有意义的另外一种状况是组件延迟渲染。这些组件能够是tooltips、popover、modal等，固然这些组件也可使用异步组件。

让咱们来看看如何在Vue中构建延迟加载异步组件。

延迟加载组件

在咱们开始了解延迟加载组件以前，咱们先来了解一般是如何加载组件的。 为此，我建立了一个Tooltip.vue组件：

<!-- Tooltip.vue -->
<template> <h1>Hi from Tooltip!</h2> </template>
复制代码

这里没有什么特别之处，它就是一个简单的组件。咱们能够经过本地注册，导入Tooltip组件并将其添加到components选项中，这样就能够在另外一个组件中使用它。好比，在App.vue中使用它：

<!-- App.vue -->
<template> <div id="app"> <Tooltip /> </div> </template>

<script>
    import Tooltip from "./components/Tooltip"

    export default {
        name: "App",
        components: {
            Tooltip
        }
    };
</script>
复制代码

只要App被导入，就能够在初始加载时，Tooltip组件就会被导入、使用和加载。可是想一想：只有在咱们要使用组件时才加载该组件难道没有意义吗？用户极可能在不须要工具提示的状况下浏览整个系统。

为何咱们要在应用程序开始时花费宝贵的资源来加载组件呢？咱们能够应用延迟加载和代码拆分来改进它。延迟加载是在稍后的阶段加载某些内容的技术。

虽然代码拆分是将一段代码拆分到一个单独的文件（称为chunk）中，以便减小应用程序的初始包，从而减轻初始加载。

经过使用动态导入（Dynamic import），Vue能够轻松应用这些技术。在ES2018中也会具备这样的功能，它容许程序在运行时加载模块。我闪将有一篇文章深刻探讨这些概念，但让咱们从实用和简单的角度开始吧。

现代的绑定器（Modern bundlers），好比Webpack（从版本2开始），Rollup和Parcel将理解这种语法并自动为该模块建立一个单独的文件，该文件将在须要时加载。

我在这里认为你已经熟悉了静态方式导入模块。然而，动态导入是一个返回Promise的函数，其中包含模块做为其有效的加载。下面的示例展现了如何以静态导入和动态方式导入utils模块。

// 静态导入模块
import utils from './utils'
复制代码

// 动态导入
import('./utils').then(utils => {
    // 能够在这里使用utils模块
})
复制代码

在Vue中延迟加载组件与在封装的函数中动态导入组件同样容易。在前面的例子中，咱们能够像下面这样延迟加载Tooltip组件：

export default {
    components: {
        Tooltip: () => import('./components/Tooltip')
    }
}
复制代码

使用**() => import('./components/Tooltip')替代前面示例中的import Tooltip from "./components/Tooltip"**。Vue一旦请求渲染将会延迟加载该组件。

不只如此，它还将应用代码拆分。你可使用上面提到的任何绑定器运行代码来进行测试。最简单的方式就是使用vue-cil，但在文章的最后，你将找到一个已经构建好的Demo。运行后，打开开发者工具，在Network一栏将可能够看到一个名为1.chunk.js这样的JavaScript文件。

有条件地加载一个异步组件

在前面的示例中，尽管咱们经过延迟加载来加载Tooltip组件，但它将在须要渲染时当即加载，这在App组件加载时就当即发生了。

然而，在实践中，咱们但愿将Tooltip组件加载能延迟到须要时加载，这一般是在触发某个事件以后有条件地进行，好比在按钮或文本上悬停时触发。

为了简单起见，在App组件中添加一个按钮，使用v-if有条件地渲染Tooltip组件：

<!-- App.vue -->
<template>
    <div>
        <button @click="show = true">Load Tooltip</button>
        <div v-if="show">
            <Tooltip />
        </div>
    </div>
</template>

<script>
    export default {
        data: () => ({
            show: false
        }),

        components: {
            Tooltip: () => import('./components/Tooltip')
        }
    }
</script>
复制代码

请记住，Vue在须要渲染以前不会使用该组件。这意味着在点击以前不须要该组件，而且该组件将被延迟加载。

异步组件的用户体验

大多数状况下，异步组件加载速度很是快，由于它们是从主包中拆分出来的小块代码。可是想象一下，你在一个很是慢的网络环境下缓慢的加载一个大的模态（Modal）组件。这可能须要一些时间来加载和渲染。

固然，你可使用一些优化，好比HTTP缓存或资源提示，以低优先级预加载到内存中。事实上，新的vue-cli会对这些延迟加载的块预先获取。不过，在一些状况下，加载可能须要一些时间。

从用户体验的角度来看，若是一个任务须要超过1s的时间，你就会开始失去用户的注意力。

可是，能够经过向用户提供反馈来保持注意力。为了吸引用户的注意力，咱们能够在加载时使用progress（进度条）组件，可是在异步加载时，咱们如何使用一个漂亮的loading或progress组件呢？

加载组件 你还记得咱们使用一个带有动态导入的函数来延迟加载异步组件吗？

export default {
    components: {
        Tooltip: () => import('./components/Tooltip')
    }
}
复制代码

经过返回对象而不是动态导入的结果来定义异步组件长期的方法。在该对象中，咱们能够定个一个加载组件：

const Tooltip = () => ({
    component: import('./components/Tooltip'),
    loading: AwesomeSpinner
})
复制代码

这样，在默认延迟200ms以后，组件AwesomeSpinner就会显示出来。你也能够自定义延迟时间：

const Tooltip = () => ({
    component: import('./components/Tooltip'),
    loading: AwesomeSpinner,
    delay: 500
})
复制代码

做为加载组件应该使用的组件必须尽量的小，以使它几乎能当即加载

错误组件

一样的，咱们能够用延迟加载组件的方式来定义一个错误组件：

const Tooltip = () => ({
    component: import('./components/Tooltip'),
    loading: AwesomeSpinner,
    error: SadFaceComponent
})
复制代码

加载**./components/Tooltip**组件出错时，SadFaceComponent组件将会显示。在下面这几种状况之下可能会发生这种状况：

网络瘫痪（连不上网） 该组件不存在（这是一种尝试它的好方法，你能够本身故意删除它） 加载超时 默认状况下，没有超时，但咱们能够本身配置：

const Tooltip = () => ({
    component: import('./components/Tooltip'),
    loading: AwesomeSpinner,
    error: SadFaceComponent,
    timeout: 5000
})
复制代码

如今，若是在5000ms以后Tooltip组件还未加载，将会显示SadFaceComponent组件。

总结

你已经了解了如何在本身的块文件中分割组件，以及如何使用动态导入来延迟加载组件。咱们还经过有条件地渲染数据来延迟数据块的加载。

虽然异步组件能够经过分割和延迟的加载方式来提升应用程序的加载时间，但它们可能会对用户体验有很大的影响，尤为是当它们很大的时候。控制加载状态容许咱们提供反馈，并在速度很慢的状况下让用户参与进来。

---

转载声明：
	做者：Alex Jover Morales
	连接：https://www.w3cplus.com/vue/async-vuejs-components.html © w3cplus.com
	来源：w3cplus
	声明：著做权归做者全部，谢绝商业转载。如需转载请联系原做者或者按照其原文声明进行操做。
	承诺：本站除原创之外全部的转载内容均是得到其做者受权或者声明可转载的。并只是将其做为学习和交流目的，杜绝一切商业盈利行为。如若侵权，请联系咱们删除。
复制代码

来源：91Code

关注公众号获取更多内容！