Vue 프로젝트에서 비동기 구성 요소를 사용하여 성능 최적화

JavaScript 프레임워크를 사용하여 대규모 애플리케이션을 만들 때 구성 요소 구조를 고려하는 것이 중요합니다. 구성 요소 구조를 생각하면 런타임 시 각 구성 요소가 로드되어 애플리케이션 속도가 느려지는 것을 방지할 수 있습니다. 애플리케이션을 구축할 때 불필요한 데이터를 사용자에게 반환하거나 전반적으로 좋지 않은 사용자 경험을 생성하는 것을 방지할 수도 있습니다.

React 및 Angular와 같은 프레임워크는 각각 React.lazy() 및 라우팅 모델을 사용하여 구성 요소 구조를 고려합니다. 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，并将其内容替换为以下内容：

<!--Book.vue-->
<template>
  <h1 id="Donate-nbsp-Books">Donate Books</h1>
</template>

然后，用以下内容替换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>

在上面的代码块中，您会注意到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组件:

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

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

在上面的代码示例中，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组件:

<!--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>

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

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

donate组件已经通过<script></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>

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

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

이 기사에서는 Vue가 비동기 구성 요소를 사용하여 지연 로딩 및 코드 분할 기술을 사용하여 애플리케이션의 로딩 시간을 줄이는 방법을 알아보기 위해 두 가지 데모를 구현합니다. 🎜🎜Vue에서 구성 요소 만들기🎜🎜작동 방식을 이해하려면 기본 구성 요소를 만드는 것부터 시작해 보겠습니다. 🎜🎜 터미널로 이동하여 Vue의 CLI를 설치하고 프로젝트를 만듭니다. 🎜

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

🎜새 프로젝트 폴더에서 helloworld.vue 및 가 포함된 기본 파일의 내용을 바꾸겠습니다. app.vue. 도서 기부 페이지를 만드는 것부터 시작해 보겠습니다. helloworld.vue의 이름을 book.vue로 바꾸고 콘텐츠를 다음으로 바꿉니다: 🎜

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

🎜 그런 다음 App.vue: 🎜<pre class='brush:php;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>🎜 위의 코드 블록에서 <code>Book 구성 요소가 정적으로 가져오는 것을 확인할 수 있습니다. 이는 애플리케이션이 로드될 때마다 Book 구성 요소가 로드된다는 의미입니다. 🎜🎜다음으로 터미널에서 npm run submit을 실행하고 localhost:8080으로 이동한 후 기본 구성 요소를 확인하세요. 🎜🎜🎜🎜이제, 앱이 로드될 때마다 Book 구성 요소는 심각한 성능 문제가 아닌 것 같습니다. 그러나 애플리케이션이 커지면 런타임에 각 구성 요소를 로드하는 것이 번거로워집니다. 🎜🎜사용자는 앱의 모든 기능과 상호 작용하지 않으므로 필요한 기능만 제공하는 것이 합리적입니다. 문제는 사용자에게 필요한 것만 로드하는 방법입니다. 🎜🎜여기서 지연 로딩과 코드 분할 기술이 사용됩니다. 지연 로드는 구성 요소의 초기 로드를 지연시켜 사용자가 페이지에서 해당 위치로 이동할 때까지 이미지와 같은 리소스가 로드되지 않도록 합니다. 🎜🎜코드 분할은 원래 webpack에서 제공하는 기능입니다. Webpack을 사용하면 필요할 때만 사용되는 다양한 패키지로 코드를 분할할 수 있습니다. 🎜🎜Vue는 동적 가져오기라는 기능을 통해 코드 분해를 수행합니다. 🎜🎜이 가져오기는 webpack(또는 Parcel과 같은 모듈 바인더)을 사용하여 구성 요소를 비동기적으로 로드합니다. 구문은 화살표 함수로 묶인 약속으로 구성됩니다. 🎜

<!--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>

🎜 이를 App.vue 구성 요소에 구현해 보겠습니다. 🎜rrreee🎜 위의 코드 예에서 import() 함수는 Book 구성 요소를 사용하면 비동기적으로 로드할 수 있습니다. devtools 브라우저의 "Network" 탭을 보면 App.js에 의해 시작된 0.js라는 파일이 있습니다. 이 파일에는 비동기 구성 요소가 포함되어 있습니다: 🎜🎜🎜🎜비동기 구성 요소를 사용하여 Vue 애플리케이션 만들기🎜🎜기본 도서 기부 애플리케이션을 계속 구축하여 방법을 보여드리겠습니다. 비동기 구성 요소를 활용합니다. 마지막으로, 사용자가 기부 버튼을 클릭할 때만 기부 구성 요소가 로드되기를 원합니다. 🎜🎜먼저 터미널로 이동하여 프로젝트 폴더에 vue-material을 설치하겠습니다. 다음 스타일의 애플리케이션을 사용하겠습니다. 🎜rrreee🎜 애플리케이션에 vue-material을 포함하고 src/main.js로 가져옵니다. 🎜rrreee🎜이제 빌드해 보겠습니다. 이전에 생성한 Book 구성 요소: 🎜rrreee🎜위 코드 블록에서 책 목록은 books 배열에서 검색되어 표시됩니다. 사용자가 각 도서에 대한 버튼을 클릭하면 addBook() 메서드가 선택한 도서를 selectList 배열에 푸시하고 기부된 도서의 총 개수를 표시합니다. 🎜🎜비동기 구성요소 로드 전용 버튼도 별도로 있습니다. 해당 매개변수 show는 true로 설정됩니다. 이를 통해 v-if 문이 선택한 도서 수를 포함하는 donate 구성 요소를 표시할 수 있습니다. 🎜🎜donate 구성 요소는 <script></script> 태그의 comComponents 속성을 ​​통해 동적으로 가져왔습니다. 🎜🎜 donate 컴포넌트를 만들어 보겠습니다. src/comComponents 폴더에 Donate라는 새 파일을 만듭니다. 그리고 다음 코드 예시를 입력하세요. 🎜rrreee🎜 터미널로 이동하여 npm run submit을 실행하세요.
🎜🎜애플리케이션이 성공적으로 컴파일되면 브라우저에서 localhost:8080을 엽니다. Devtools의 네트워크 탭을 보는 동안 애플리케이션을 클릭하면 기부 버튼을 클릭할 때만 기부 구성 요소가 로드됩니다. 🎜

异步组件的错误处理

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

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

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

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

现在，在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>

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

结论

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

相关推荐：

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

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

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

위 내용은 Vue 프로젝트에서 비동기 구성 요소를 사용하여 성능 최적화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!