Verwenden Sie asynchrone Komponenten in Vue-Projekten, um die Leistung zu optimieren-View.js-php.cn

Verwenden Sie asynchrone Komponenten in Vue-Projekten, um die Leistung zu optimieren

Beim Erstellen großer Anwendungen mit JavaScript-Frameworks ist es wichtig, die Komponentenstruktur zu berücksichtigen. Durch die Berücksichtigung der Komponentenstruktur können Sie vermeiden, jede Komponente zur Laufzeit zu laden und Ihre Anwendung zu verlangsamen. Beim Erstellen Ihrer Anwendung können Sie außerdem vermeiden, unnötige Daten an den Benutzer zurückzugeben oder eine insgesamt schlechte Benutzererfahrung zu verursachen.

Frameworks wie React und Angular verwenden React.lazy() bzw. Routing-Modelle, um die Komponentenstruktur zu berücksichtigen. React.lazy（）和路由模型来考虑组件结构。

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

在Vue中创建组件

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

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

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

Nach dem Login kopieren

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

<!--Book.vue-->
<template>
  <h1>Donate Books</h1>
</template>

Nach dem Login kopieren

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

<!--App.vue-->
<template>
  <div>
    <book></book>
  </div>
</template>

<script>
  Import Book from "./components/Book"
  export default {
    components: {
      Book
    }
  }
</script>

<style>
#app {
  font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Nach dem Login kopieren

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

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

Verwenden Sie asynchrone Komponenten in Vue-Projekten, um die Leistung zu optimieren

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

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

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

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

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

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

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

Nach dem Login kopieren

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

<template>
  <div>
    <book></book>
  </div>
</template>

<script>
export default {
  components: {
    Book: () => import("./components/Book")
  }
};
</script>

Nach dem Login kopieren

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

Verwenden Sie asynchrone Komponenten in Vue-Projekten, um die Leistung zu optimieren

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

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

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

cd book-project
npm i vue-material

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

<!--Book.vue-->
    <template>
     <div id="app">
      <md-card md-with-hover v-for="(book, key) in books" v-bind:key="key">
          <md-ripple>
            <md-card-header>
              <div class="md-title">{{book.name}}</div>
              <div class="md-subhead">{{book.genre}}</div>
            </md-card-header>
            <md-card-actions>
        <md-button type="primary" @click="addBook(key)">Donate to improve {{book.genre}}</md-button>
            </md-card-actions>
          </md-ripple>
        </md-card>
        <div v-if="show">
          <md-card-content>
         <donate v-bind:selectList="selectList"></donate>
          </md-card-content>
    </div>
        <md-button @click="show = true" id="donate">Donate {{selectList.length}} book(s)</md-button>
      </div>  
    </template>
    
    <script>
      export default {
      name: &#39;RegularButtons&#39;,
      methods: {
        addBook (key) {
          if(!this.selectList.includes(key)) {
            this.selectList.push(key);
          }
        }
      },
      components: {
        donate: () => import(&#39;./Donate&#39;)
      },
      data: () => ({
        books: [
          { name: &#39;Using Creatine&#39;, genre: &#39;Workouts&#39; },
          { name: &#39;Learn Parkour&#39;, genre: &#39;Sports&#39; },
          { name: &#39;Snorkelling&#39;, genre: &#39;Diving&#39; },
        ],
        selectList: [],
        show: false
      })
    }
    </script>

Nach dem Login kopieren

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

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

donate组件已经通过<script>标记中的components属性动态导入。

让我们创建donate组件。在src/components文件夹中，创建一个名为Donate的新文件。并输入下面的代码示例:

<template>
      <div title="Donate Books" key="donate">
          <p v-for="(x, y) in this.selectList" :key="y">
          Tip: {{books[Number(x)].name}} is about {{books[Number(x)].genre}}
          </p>
      </div>
</template>
<script>
export default {
  props: [&#39;selectList&#39;],
  data: () => ({
    books: [
      { name: &#39;Using Creatine&#39;, genre: &#39;Workouts&#39; },
      { name: &#39;Learn Parkour&#39;, genre: &#39;Sports&#39; },
      { name: &#39;Snorkelling&#39;, genre: &#39;Underwater&#39; },
    ]
  })
}
</script>

Nach dem Login kopieren

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

如果应用程序编译成功，在浏览器中打开localhost:8080。当你在Devtools中查看网络标签时点击应用程序，当你点击Donate按钮时，Donate

In diesem Artikel werden wir zwei Demos implementieren, um zu sehen, wie Vue asynchrone Komponenten verwenden kann, um die Ladezeit der Anwendung durch den Einsatz von Lazy-Loading- und Code-Splitting-Techniken zu verkürzen. 🎜🎜Erstellen einer Komponente in Vue🎜🎜Um zu verstehen, wie es funktioniert, beginnen wir mit der Erstellung einer Basiskomponente. 🎜🎜 Navigieren Sie zu Ihrem Terminal, installieren Sie die CLI von Vue und erstellen Sie ein Projekt: 🎜

In src/components, let&#39;s create two components: LoadingState.vue and ErrorState.vue:

Nach dem Login kopieren

🎜Ersetzen wir in unserem neuen Projektordner den Inhalt der Standarddatei, die helloworld.vue und enthält app.vue. Wir beginnen mit der Erstellung einer Buchspendenseite. Benennen Sie helloworld.vue in book.vue um und ersetzen Sie den Inhalt durch Folgendes: 🎜

<!--LoadingState.vue-->
    <template>
      <p><em>Loading...</em></p>
    </template>

Nach dem Login kopieren

🎜 Ersetzen Sie dann

App.vue< durch den folgenden Inhalt. Inhalt von / code>: 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">&lt;!--ErrorState.vue--&gt;
    &lt;template&gt;
      &lt;p&gt;Could not display books. Kindly check your internet conection.&lt;/p&gt;
    &lt;/template&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜 Im obigen Codeblock werden Sie feststellen, dass die Komponente <code>Book

statisch importiert wird. Dies bedeutet, dass die Book-Komponente jedes Mal geladen wird, wenn die Anwendung geladen wird. 🎜🎜Als nächstes führen Sie npm run servo im Terminal aus, navigieren Sie zu localhost:8080 und sehen Sie sich Ihre Basiskomponenten an: 🎜🎜 Verwenden Sie asynchrone Komponenten in Vue-Projekten, um die Leistung zu optimieren

Verwenden Sie asynchrone Komponenten in Vue-Projekten, um die Leistung zu optimieren

🎜🎜Jetzt wird Book-Komponente scheint kein wesentliches Leistungsproblem darzustellen. Wenn die Anwendung jedoch größer wird, wird das Laden jeder Komponente zur Laufzeit umständlich. 🎜🎜Ihre Benutzer werden nicht mit allen Funktionen Ihrer App interagieren, daher ist es sinnvoll, nur die Funktionen bereitzustellen, die sie benötigen. Die Frage ist: Wie lädt man nur das, was der Benutzer benötigt? 🎜🎜Hier kommen Lazy-Loading- und Code-Splitting-Techniken ins Spiel. Lazy Loading verzögert das anfängliche Laden einer Komponente und verhindert so, dass Ressourcen wie Bilder geladen werden, bis der Benutzer zu ihrer Position auf der Seite navigiert. 🎜🎜Code-Splitting ist eine Funktion, die ursprünglich von Webpack bereitgestellt wurde. Mit Webpack können Sie Ihren Code in verschiedene Pakete aufteilen, die nur bei Bedarf verwendet werden. 🎜🎜Vue führt die Codezerlegung über eine Funktion namens dynamische Importe durch. 🎜🎜Dieser Import verwendet Webpack (oder einen beliebigen Modulbinder wie Parcel), um die Komponente asynchron zu laden. Seine Syntax besteht aus einem Versprechen, verpackt in einer Pfeilfunktion: 🎜

<!--App.vue-->
<script>
import LoadingState from "./components/LoadingState"
import ErrorState from "./components/ErrorState"
const Book = import("./components/Book")
export default {
  components: {
    Book: () => ({
// Book is our default component
      component: Book,
// LoadingState is the component that is displayed while our default component
// is loading
      loading: LoadingState,
// ErrorState is the component that is displayed should our default component have an // error while loading
      error: ErrorState,
// A delay is set up before the loading component is shown
      delay: 100,
// Should this timeout be reached, the default component is considered to have failed // to load
      timeout: 2000
    })
  }
};
</script>

Nach dem Login kopieren

🎜 Lassen Sie uns dies in unserer App.vue-Komponente implementieren: 🎜rrreee🎜 Im obigen Codebeispiel gibt die Funktion import() das < zurück code>Book-Komponente, die es uns ermöglicht, es asynchron zu laden. Wenn wir uns die Registerkarte „Netzwerk“ im Browser devtools ansehen, gibt es eine Datei namens 0.js, die von App.js initiiert wurde. Diese Datei enthält unsere asynchrone Komponente: 🎜🎜 2 . png

🎜🎜Erstellen Sie eine Vue-Anwendung mit asynchronen Komponenten🎜🎜Lassen Sie uns mit der Erstellung einer einfachen Buchspendenanwendung fortfahren, um zu zeigen, wie um asynchrone Komponenten zu nutzen. Schließlich möchten wir, dass die Komponente Spenden nur dann geladen wird, wenn der Benutzer auf die Schaltfläche Spenden klickt. 🎜🎜Navigieren wir zunächst zum Terminal und installieren Sie vue-material in unserem Projektordner. Wir werden diese gestaltete Anwendung verwenden: 🎜rrreee🎜 Wir werden vue-material in die Anwendung einbinden und in src/main.js importieren: 🎜rrreee🎜Jetzt lasst uns bauen die Book-Komponente, die wir zuvor erstellt haben: 🎜rrreee🎜Im obigen Codeblock wird die Buchliste aus dem Bücher-Array abgerufen und angezeigt. Wenn der Benutzer auf die Schaltfläche für jedes Buch klickt, verschiebt die Methode addBook() die ausgewählten Bücher in das Array selectList und zeigt die Gesamtzahl der gespendeten Bücher an. 🎜🎜Es gibt auch eine separate Schaltfläche zum Laden asynchroner Komponenten. Sein Parameter show ist auf true gesetzt. Dadurch kann eine v-if-Anweisung eine donate-Komponente anzeigen, die die Anzahl der ausgewählten Bücher enthält. 🎜🎜Die Komponente donate wurde dynamisch über das Attribut components im Tag <script> importiert. 🎜🎜Lassen Sie uns die Komponente spenden erstellen. Erstellen Sie im Ordner src/components eine neue Datei mit dem Namen Donate. Und geben Sie das folgende Codebeispiel ein: 🎜rrreee🎜 Navigieren Sie zu Ihrem Terminal und führen Sie npm run Serve aus.
🎜🎜Wenn die Anwendung erfolgreich kompiliert wurde, öffnen Sie localhost:8080 im Browser. Wenn Sie auf die Anwendung klicken, während Sie die Registerkarte „Netzwerk“ in Devtools anzeigen, wird die Komponente Spenden nur geladen, wenn Sie auf die Schaltfläche Spenden klicken. 🎜

异步组件的错误处理

异步组件需要尽可能简单，以便快速加载。但是，在我们的异步组件中定义加载和错误组件有助于处理加载状态并在需要时显示错误消息。

In src/components, let&#39;s create two components: LoadingState.vue and ErrorState.vue:

Nach dem Login kopieren

<!--LoadingState.vue-->
    <template>
      <p><em>Loading...</em></p>
    </template>

Nach dem Login kopieren

<!--ErrorState.vue-->
    <template>
      <p>Could not display books. Kindly check your internet conection.</p>
    </template>

Nach dem Login kopieren

现在，在App.vue中，我们将导入两个组件并将它们添加到Book组件中:

<!--App.vue-->
<script>
import LoadingState from "./components/LoadingState"
import ErrorState from "./components/ErrorState"
const Book = import("./components/Book")
export default {
  components: {
    Book: () => ({
// Book is our default component
      component: Book,
// LoadingState is the component that is displayed while our default component
// is loading
      loading: LoadingState,
// ErrorState is the component that is displayed should our default component have an // error while loading
      error: ErrorState,
// A delay is set up before the loading component is shown
      delay: 100,
// Should this timeout be reached, the default component is considered to have failed // to load
      timeout: 2000
    })
  }
};
</script>

Nach dem Login kopieren

加载和错误状态不会出现，除非你有一个非常缓慢或错误的互联网连接。为了测试它们是否工作正常，我们将timeout属性设置为0，并尝试加载应用程序。

结论

使用异步组件构建大型应用程序是保持最佳性能的关键。异步组件不仅可以确保由于更快的加载时间，您的保留率会更高，而且还可以帮助您更有效地检测错误，因为组件的作用域是作为函数传递的。如果你想看看这个演示的源代码，你可以在GitHub上找到它。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonVerwenden Sie asynchrone Komponenten in Vue-Projekten, um die Leistung zu optimieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!