在Vue中使用defineAsyncComponent来延迟加载组件

.popup{position:fixed;width:100%;top:;left:;height:100%;background-color:rgba(,,,0.2);display:flex;justify-content:center;align-items:center;}.content{min-width:200px;width:30%;background:#fff;height:200px;padding:10px;border-radius:5px;}input[type="text"],input[type="password"]{border:;outline:;border-bottom:1pxsolid#eee;width:80%;margin:auto;font-size:0.5em;}button{border:;margin-top:50px;background-color:#8e44ad;color:#fff;padding:5px10px;font-size:0.5em;}使用Vue3的defineAsyncComponent特性可以让我们延迟加载组件。这意味着它们仅在需要时从服务器加载。这是改善初始页面加载的好方法，因为我们的应用程序将以较小的块加载，而不必在页面加载时加载每个组件。在本教程中，我们将了解defineAsyncComponent的全部内容，并查看一个示例，该示例将弹出窗口的加载延迟到我们的应用程序需要它时。好吧，让我们开始吧。什么是defineAsyncComponent//SOURCE:https://v3.vuejs.org/guide/component-dynamic-async.htmlconstAsyncComp=defineAsyncComponent(()=>newPromise((resolve,reject)=>{resolve({template:'

'})))defineAsyncComponent接受返回Promise的工厂函数。当我们从服务器成功获取组件时，这个Promise应该resolve，如果有错误则reject。要使用它，我们必须先从Vue导入它，然后才能在脚本的其余部分使用它。我们还可以使用工厂函数中的导入轻松地从其他文件添加Vue组件。import{defineAsyncComponent}from"vue"//简单使用constLoginPopup=defineAsyncComponent(()=>import("./components/LoginPopup.vue"))这是defineAsyncComponent最简单的使用方式，但是我们也可以传入一个完整的配置几个更高级参数的选项对象。//withoptionsconstAsyncPopup=defineAsyncComponent({loader:()=>import("./LoginPopup.vue"),loadingComponent:LoadingComponent,/*加载时显示*/errorComponent:ErrorComponent,/*显示是否有错误*/delay:1000,/*在显示加载组件之前延迟毫秒*/timeout:3000/*在此毫秒后超时*/})就个人而言，我发现自己更经常使用第一种更短的语法，它适用于我的大多数用例会工作，但这完全取决于你。就这么简单，让我们进入我们的例子。使用defineAsyncComponent延迟加载弹出组件在此示例中，我们将使用通过单击按钮触发的登录弹出窗口。我们不需要每次应用程序加载时都加载此组件，因为只有在用户执行特定操作时才需要它。所以这就是我们的登录组件的样子，它只是通过用position:fixed遮住屏幕的其余部分来创建一个弹出窗口，并且有一些输入和一个提交按钮。.popup{position:fixed;width:100%;top:;left:;height:100%;background-color:rgba(,,,0.2);display:flex;justify-content:center;align-items:center;}.content{min-width:200px;width:30%;background:#fff;height:200px;padding:10px;border-radius:5px;}input[type="text"],input[type="password"]{border:;outline:;border-bottom:1pxsolid#eee;width:80%;margin:auto;font-size:0.5em;}button{border:;margin-top:50px;background-color:#8e44ad;color:#fff;padding:5px10px;font-size:0.5em;}而不是像往常一样将其导入并包含在我们的组件选项中。script>importLoginPopupfrom'./components/LoginPopup.vue'exportdefault{components:{LoginPopup},data(){return{show:false}}}我们可以改为使用defineAsyncComponent只在需要时加载它（意思是点击按钮并切换我们的v-if)虽然这在我们使用我们的应用程序时可能看起来相同，但让我们检查Elements>Network以了解这个小但重要的区别。如果我们不使用defineAsyncComponent，我们将看到我们的应用程序在页面加载后从服务器获取LoginPopup.vue。虽然这可能不是这个例子中最大的性能问题，但它仍然会减慢加载速度，如果我们有几十个组件这样做，它真的可以加起来。但是，如果我们使用defineAsyncComponent查看同一个选项卡，我们会注意到当我们的页面加载时，LoginPopup.vue消失了，因为它还没有加载。但是一旦我们点击我们的按钮并告诉我们的应用程序显示我们的弹出窗口，此时它从服务器加载并且我们可以在网络选项卡中看到它。这有助于我们实现最佳性能。我们只想在页面的初始加载时加载所需的组件。当我们的页面加载时通常不需要条件渲染的组件，那么我们为什么要让我们的应用程序加载它们呢？如何使用异步设置函数任何具有异步设置功能的组件，无论是否使用defineAsyncComponent延迟加载，都必须打包。简而言之，创建异步设置函数是让我们的组件在渲染之前等待某些API调用或其他异步操作的一个选项。这是我们具有异步设置的组件。它使用setTimeout()模拟API调用。我们可以在有或没有defineAsyncComponentimportLoginPopupfrom'./components/LoginPopup.vue'//ORconstLoginPopup=defineAsyncComponent(()=>import("./components/LoginPopup.vue"))的情况下将其导入我们的组件，但是如果我们希望它在我们的模板中呈现，我们需要将它包装在一个Suspense元素中。这将等待我们的设置函数在尝试渲染我们的组件之前解析。

加载中...

这是结果。用户将看到“正在加载...”，然后在3秒后（我们setTimeout的硬编码值），我们的组件将呈现。默认情况下，我们使用defineAsyncComponent定义的所有组件都是可挂起的。这意味着如果一个组件在其父链中有Suspense，它将被视为该Suspense的异步依赖。我们组件的加载、错误、延迟和超时选项将被忽略，并由Suspense处理。最后的想法defineAsyncComponent在创建包含数十个组件的大型项目时很有用。当我们转向延迟加载组件时，我们可以加快页面加载时间，改善用户体验，并最终提高您应用的保留率和转化率。我想知道您对此功能的看法。如果您已经在您的应用程序中使用它，请在下面的评论中告诉我。原文：https://learnvue.co/2021/06/lazy-load-components-in-vue-with-defineasynccomponent/作者：MattMaribojoc二维码关注。转载本文请联系前端全栈开发公众号。