使用异步组件优化Vue应用程序的性能

　　

单页应用其一个问题是首屏屏渲染速度较慢。这是因为页面首次加载时服务器将向客户端发送大量JavaScript在屏幕上显示任何内容之前必须下载并解析。可以想象,随着应用程序规模的扩大,这个问题对用户体验的影响也会越来越突出。

　　

现在幸运的是,当使用Vue CLI构建Vue应用程序时(使用webpack),可以采取一些措施来抵消这种情况。在本文中,我将演示如何在应用程序的初始渲染之后使用<代码>异步组件> 　　

　　

在我们开始创建异步组件之前,让我们看一下我们通常如何加载组件。为此,我们将使用一个非常简单的消息组件作为例子:

　　 　　 　　& lt; !——消息。vue——比; 　　& lt; template> 　　& lt; h2>新消息! & lt;/h2> 　　& lt;/template> 　　 　　

现在我们已经创建了我们的<代码>消息> 　　 　　 　　& lt; !——App.vue祝辞 　　& lt; template> 　　& lt; div> 　　& lt; message> & lt;/message> 　　& lt;/div> 　　& lt;/template> 　　 　　& lt; script> 　　从“进口信息。/信息”; 　　出口默认{ 　　组件:{ 　　消息 　　} 　　}; 　　& lt;/script> 　　 　　

但现在发生了什么?只要应用程序加载,就会加载<代码> 消息组件,因此它包含在初始加载过程中。

　　

对于一个简单的应用程序来说,这看起来可能不是一个大问题,但可以考虑像电商网站这样复杂的场景。想象一下,用户将项目添加到购物车,然后想要结的帐,因此单击结帐按钮会生成一个包含所选商品的所有详细信息的框。使用上述方法,此结帐框将包含在初始包中,但我们只需在用户单击结帐按钮时使用该组件。用户甚至可以在不点击结账按钮的情况下浏览网站,这意味着在加载这个可能不会使用的组件时浪费资源是没有意义的。

　　

为了提高应用程序的效率,我们可以结合延迟加载和代码分割技术。

　　

Webpack提供的代码拆分功能允许您将代码拆分为各种捆绑包,然后可以按需加载或稍后并行加载。它只能在需要或使用时加载特定的代码片段。

　　

　　

Vue使用进口动态解决这种情况。此功能引入了一种新的类似函数的导入形式,它将返回包含(Vue)组件的承诺。由于进口是一个接收字符串的函数,我们可以做一些强大的事情,比如使用表达式加载模块。自版61本以来,Chrome中已提供动态导入。有关这些内容的详细信息,请访问谷歌开发者网站。

　　

代码拆分由webpack,汇总或包裹等捆绑器处理,它们解析动态导入语法并为每个动态导入的模块创建单独的文件。稍后我们将在控制台的网络选项卡中看到这一点。但首先,我们来看看静态和动态导入之间的区别:

　　 　　//静态导入 　　从“进口信息。/信息”;//动态导入 　　进口(“。/消息”)。然后(消息=比;{//消息模块可以在这里… 　　}); 　　之前 　　 　　

现在,让我们将这些知识应用到我们的<代码>消息> App.vue

　　 　　 　　& lt; !——App.vue祝辞 　　& lt; template> 　　& lt; div> 　　& lt; message> & lt;/message> 　　& lt;/div> 　　& lt;/template> 　　 　　& lt; script> 　　从“进口信息。/信息”; 　　出口默认{ 　　组件:{ 　　信息:()=比;进口(“。/消息”) 　　} 　　}; 　　& lt;/script> 　　 　　

如你所见,函数导入()将解析返回组件的承诺,这意味着我们已成功异步加载组件。如果您查看<代码> devtools 的<代码>网络> 0。js> 　　

使用异步组件优化Vue应用程序的性能”>,</p> 　　<p> </p> 　　<p>现在我们已经掌握了异步组件,让我们仅在真正需要时加载它们。在本文的上一节中,我解释了仅在用户点击结帐按钮时才加载的结帐框的用例。让我们把它构建出来。</p> 　　<p> <强>项目设置</强> </p> 　　<p>如果您没有安装<代码> vue/cli> </代码,首先应该安装它:<h2 class=使用异步组件优化Vue应用程序的性能