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

时间：2021-08-25 来源：互联网编辑：宝哥软件园浏览：次

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

幸运的是，在使用Vue CLI(使用webpack)构建Vue应用程序时，可以采取一些措施来抵消这种情况。在本文中，我将演示如何使用异步组件和webpack的代码拆分功能在应用程序的初始呈现后加载页面的某些部分。这将最小化初始加载时间，并为您的应用程序提供更好的用户体验。

理解异步组件

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

！- Message.vue -模板h1新消息！/h1/模板现在我们已经创建了我们的消息组件，让我们将它加载到我们的文件中并显示它。我们可以导入组件并将其添加到组件选项中，以便在模板中使用它：

！- App.vue -模板div消息/消息/div/模板脚本导入消息自’。/Message '；导出默认{组件： {消息} }；/脚本但是现在发生了什么？每当应用程序加载时，都会加载消息组件，因此它包含在初始加载过程中。

对于一个简单的应用程序来说，这似乎不是一个大问题，但是您可以考虑像电子商务网站这样的复杂场景。假设用户向购物车中添加了一个商品，然后想要结账，那么单击结账按钮将生成一个包含所选商品所有详细信息的框。使用上述方法，这个签出框将包含在初始包中，但是我们只需要在用户单击签出按钮时使用这个组件。用户甚至不用点击结账按钮就可以浏览网站，这意味着在加载这个可能不会用到的组件时浪费资源是没有意义的。

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

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

动态导入(动态导入)

Vue使用动态导入来解决这种情况。该函数引入了类似函数的新导入形式，将返回包含(Vue)组件的Promise。由于import是一个接收字符串的函数，所以我们可以做一些功能强大的事情，比如用表达式加载模块。从61版开始，动态导入就已经在Chrome中可用了。有关这些内容的更多信息，请访问谷歌开发者网站。

代码拆分由webpack、Rollup或parse等捆绑包处理，它们解析动态导入语法，并为每个动态导入的模块创建单独的文件。稍后我们将在控制台的“网络”选项卡中看到这一点。但是首先，让我们看看静态和动态导入的区别：

//静态导入来自“”的消息。/Message '；//动态导入('。/Message ')。然后(消息={ //这里有消息模块.});现在，让我们将这些知识应用到我们的消息组件中，我们将获得如下所示的组件

！- App.vue -模板div消息/消息/div/模板脚本导入消息自’。/Message '；导出默认{ components : { message :()=import('。/Message ')} }；/script如您所见，函数import()将解析返回组件的Promise，这意味着我们已经成功异步加载了组件。如果您查看devtools的网络选项卡，您会注意到一个名为0.js的文件包含异步组件。

根据条件加载异步组件

现在我们已经掌握了异步组件，让我们仅在真正需要时加载它们。在本文的上一节中，我解释了仅在用户点击结帐按钮时才加载的结帐框的用例。让我们把它构建出来。

项目设置

如果您没有安装vue/cli，首先应该安装它：

npm i -g @vue/cli接下来，使用硬币指示器(硬币水平指示器的缩写)命令行界面(批处理脚本的命令行界面)创建新项目，在出现提示时选择默认预设即可：

某视频剪辑软件创建我的商店转到项目目录，然后安装我们将用于样式的蚂蚁设计库：

cd my-storenpm i ant-design-vue接下来，导入蚂蚁设计库：src/main.js

导入' ant-design-vue/dist/antd.css '最后我们在src/组件里创建两个新组件Checkout.vue和Items.vue:

触摸src/组件/{Checkout.vue，Items.vue}写一个商店的视图层

打开src/App.vue并用以下代码替换文件里代码：

模板div id=' app ' h1 { { msg } }/h1 items/items/div/templatescriptimport items from ' ./components/Items '导出默认{ components : { Items }，name: 'app '，data () { return { msg: 'My花式t恤店} } }/script style # app { font-family : ' Avenir '，Helvetica，Arial，无衬线；-网络套件-字体-流畅：抗锯齿；-moz-OSX-字体-平滑：灰度；文本对齐：中心；颜色： # 2c 3e 50边距-top : 60px；}h1、H2 {字体粗细：正常；} ul { list-style-type : no；padd : 0；}li {显示：内联块；margin : 0 10px } a { color : # 42b 983 }/样式这里没有什么花哨的东西。我们所做的只是显示一条消息并渲染一个项目组件。

接下来，打开零部件/项目并添加以下代码：

模板div div style=' padd : 20px ' row :装订线=' 16 ' Col : span=' 24 ' style=' padd :5 px ' Icon type='购物车style=' margin-right :5 px '/{ { shoppingList }。长度} }项目Button @ click=' show=true ' id=' check out ' check/Button/Col/Row/div v-if=' show ' Row :装订线=' 16 ' style=' margin :0 40000 padd : 20px行：檐槽=' 16 ' Col : span=' 6 ' v-for='(项目，键)在items ' v-bind : key=' key ' style=' padd :5 px ' Card v-bind : title=' item。msg ' v-bind : key=' key ' Button type=' primary ' @ click=' addItem(key)' Buy $ { { item。价格} }/按钮/卡片/栏/行/格/格导出默认的{ methods: { addItem (key) { if(！这个。购物清单。包括(键)){这。购物清单。推(键)；} } },组件： {卡片、列、行、按钮、图标、检出： ()=导入('。/Checkout') }，数据：()=({ items :[{ msg: '第一产品，价格： 9.99 }，{ msg: '第二产品，价格： 19.99 }，{ msg: '第三产品，价格： 15.00 }，{ msg: '花式衬衫，价格： 137.00 }，{ msg : '颜色：白色；左边距left: 10px}/样式在此文件中，我们显示一个带有商品数量的购物车图标。商品是从项目数组中提取的。如果单击项目的购买按钮，将会调用添加某物品给商人或自己方法，该方法会将相关商品推到购物清单数组中。从而增加购物车的总数。

我们还在页面中添加了一个检验按钮：

按钮@点击='显示=真id='结帐'结帐/按钮当用户点击这个按钮，我们设置的参数显示是真的。真实的是非常重要对于有通过条件地加载我们的异步组件。

在接下来的几行中，您可以找到控制显示的声明，这个语句仅用来显示我们检验组件的div，但是我们只想在用户点击检验按钮时显示结账组件，我们该怎么办？

这里，我们在组件选项中异步加载检出组件。这里v-bind将参数传递给组件。如您所见，创建条件异步组件很容易：

div v-if=' show ' check out v-bind : shopping list=' shopping list '/check out/div让我们将以下代码添加到src/components/Checkout.vue中的快速结帐组件：

模板卡片标题='结帐项目'键='结帐' p v-for='(k，I)在this . shopping list ' : key=' I ' item : { { Items[Number(k)]。${{items[Number(k)]的消息}}。价格} }/p/Card/templatescript从“ant-design-vue”导入{ Card }；导出默认{ prop :[' shopping list ']，组件： { Card }，data :()=({ items :[{ msg: '第一产品'，价格： 9.99 }，{ msg: '第二产品'，价格： 19.99 }，{ msg: '第三产品'，价格： 15.00 }，{ msg : '花式衬衫'，价格3330

您可以使用npm运行服务命令来运行应用程序。然后导航到http://localhost: 8080。如果一切按计划进行，您应该会看到下图所示的内容。