Vue项目中怎么使用异步组件来优化性能-创新互联

这篇文章将为大家详细讲解有关Vue项目中怎么使用异步组件来优化性能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

在使用JavaScript框架创建大型应用程序时，考虑组件结构非常重要。通过考虑组件结构，可以避免在运行时加载每个组件并减慢应用程序的速度。在构建应用程序时，您还可以避免向用户返回不必要的数据或创建整体糟糕的用户体验。

React和Angular等框架分别使用React.lazy（）和路由模型来考虑组件结构。

在这篇文章中，我们将实现两个演示，看看Vue如何使用异步组件，通过使用延迟加载和代码分割技术来减少应用程序的加载时间。

在Vue中创建组件

为了理解它是如何工作的，让我们从创建一个基本组件开始。

导航到您的终端，安装Vue的CLI，并创建一个项目:

npm install -g vue/cli
vue create book-project
#choose the default setting when prompted

在我们的新项目文件夹中，让我们替换默认文件的内容，其中包括helloworld.vue和app.vue。我们将从创建图书捐赠页面开始。将helloworld.vue重命名为book.vue，并将其内容替换为以下内容：

然后，用以下内容替换App.vue的内容：

在上面的代码块中，您会注意到Book组件是静态导入的。 这意味着Book组件在每次加载应用程序时都会加载。

接下来，在终端中运行npm run serve，导航至localhost：8080，然后查看您的基本组件：

现在，每次加载应用程序时加载Book组件似乎不是一个重要的性能问题。但是，随着应用程序越来越大，在运行时加载每个组件将变得很麻烦。

您的用户不会与应用程序中的每个功能都进行交互，因此只提供他们需要的功能是有意义的。问题是，如何只加载用户需要的内容?

这就是延迟加载和代码分割技术发挥作用的地方。延迟加载会延迟组件的初始加载，在用户导航到位于页面上的位置之前，会阻止加载图像等资源。

代码分割是webpack最初提供的一个特性。Webpack允许您将代码分割成仅在需要时使用的各种包。

Vue通过一个称为动态导入的特性执行代码分解。

此导入使用webpack(或任何模块绑定器，如Parcel)异步加载组件。它的语法包含一个承诺，并包装在一个箭头函数:

// dynamic import
import("./components/Book").then(Book => {
  // Insert the Book module here
});

让我们实现这个在我们的App.vue组件:

在上面的代码示例中，import（）函数返回Book组件，这使我们能够异步加载它。 如果我们在浏览器devtools中查看“网络”标签，则有一个由App.js发起的名为0.js的文件。 该文件包含我们的异步组件：

使用异步组件创建一个Vue应用程序

让我们继续构建一个基本的图书捐赠应用程序，以展示如何利用异步组件。最后，我们只想在用户单击Donate按钮时加载Donate组件。

首先，让我们导航到终端并在我们的项目文件夹中安装vue-material。我们将使用这个样式的应用程序:

cd book-project
npm i vue-material

我们将在应用程序中包括vue-material导入它在src/main.js:

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
Vue.use(VueMaterial)
new Vue({
  render: h => h(App),
}).$mount('#app')

现在，让我们来构建之前创建的Book组件:

在上面的代码块中，图书列表从图书数组中检索并显示。如果用户单击每本书的按钮，addBook()方法将选择的书推入selectList数组，并显示捐赠图书的总数。

还有一个单独的按钮，专门用于加载异步组件。它的参数show设置为true。这使得v-if语句能够显示donate组件，该组件包含所选书籍的数量。

donate组件已经通过

导航到您的终端并运行npm run serve。

In src/components, let's create two components: LoadingState.vue and ErrorState.vue: