비동기식 구성 요소가 Vue 응용 프로그램의 성능을 최적화하는 방법

저자: Raphael Ugwu✏️
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으로 이름을 바꾸고 그 내용을 다음과 같이 바꿉니다.

<!--Book.vue-->
<template>
  <h1>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: 'Avenir', 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는 동적 가져오기라고 하는 기능을 통해 코드 분할을 수행합니다.
이 가져오기는 웹 팩이나 모듈 귀속기 (예: 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의 Network 옵션 카드를 보면 0.js이라는 파일이 App.js에서 시작하는 것을 발견할 수 있습니다.이 파일에는 비동기식 구성 요소가 포함되어 있습니다.

비동기식 구성 요소를 사용하여 Vue 응용 프로그램 만들기

비동기 구성 요소를 어떻게 활용하는지 보여주기 위해 기본적인 도서 기증 프로그램을 계속 구축합시다.결국, 우리는 사용자가'기부'단추를 눌렀을 때 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: 'RegularButtons',
      methods: {
        addBook (key) {
          if(!this.selectList.includes(key)) {
            this.selectList.push(key);
          }
        }
      },
      components: {
        donate: () => import('./Donate')
      },
      data: () => ({
        books: [
          { name: 'Using Creatine', genre: 'Workouts' },
          { name: 'Learn Parkour', genre: 'Sports' },
          { name: 'Snorkelling', genre: 'Diving' },
        ],
        selectList: [],
        show: false
      })
    }
    </script>

위의 코드 블록에서 Book 수조에서 책 목록을 검색하고 표시합니다.사용자가 각 책에 첨부된 단추를 누르면 addBook() 방법으로 선택한 책을 selectList 수조로 밀어넣고 기증 서적의 총수를 표시합니다.
비동기식 구성 요소를 불러오는 데 사용되는 단독 단추가 있습니다.그 매개 변수 show은 true으로 설정됩니다.이로써 v-if 문장은 donate 구성 요소를 표시할 수 있으며, 이 구성 요소는 기부를 위해 선택한 도서 수를 포함한다.donate 구성 요소는 components 태그의 <script> 속성을 통해 동적으로 가져옵니다.donate 구성 요소를 만듭니다.src/components 폴더에 Donate.vue이라는 새 파일을 만들고 다음 코드 예제를 입력합니다.

<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: ['selectList'],
  data: () => ({
    books: [
      { name: 'Using Creatine', genre: 'Workouts' },
      { name: 'Learn Parkour', genre: 'Sports' },
      { name: 'Snorkelling', genre: 'Underwater' },
    ]
  })
}
</script>

터미널로 이동하여 npm run serve. 실행
응용 프로그램이 성공적으로 컴파일되면 브라우저에서 localhost:8080을 엽니다.Devtools에서 네트워크 탭을 보고 응용 프로그램을 클릭하면 Donate 구성 요소는 Donate 단추를 눌렀을 때만 불러옵니다.donate 구성 요소는 1.js으로 표시되며 초기 응용 프로그램 렌더링에 로드되지 않습니다.

비동기식 구성 요소의 오류 처리

비동기식 구성 요소는 가능한 한 간단하게 불러올 수 있도록 해야 한다.그러나 비동기식 구성 요소에 불러오는 것과 오류 구성 요소를 정의하여 불러오는 상태를 처리하고 필요할 때 오류 메시지를 표시하는 것이 도움이 됩니다.

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에서 here을 찾을 수 있습니다.
편집자: 이 문장에 무슨 문제가 있습니까?정확한 버전 here을 찾을 수 있습니다.

플러그인: 네트워크 어플리케이션용 DVR용 LogRocket

 

 
LogRocket은 프론트 로그 기록 도구로 질문을 다시 재생할 수 있습니다. 마치 브라우저에서 발생한 것처럼.LogRocket은 오류가 발생한 원인을 추측하거나 화면 캡처와 로그 저장을 물어보지 않고 세션을 다시 재생할 수 있도록 합니다.프레임워크가 어떻든지 간에 모든 응용 프로그램과 완벽하게 어울릴 수 있으며, 플러그인은 Redux, Vuex, @ngrx/store의 추가 상하문을 기록합니다.
 
LogRocket은 Redux 작업과 상태를 기록하는 것 외에도 콘솔 로그, JavaScript 오류, 스택 추적, 헤더+본문이 있는 네트워크 요청/응답, 브라우저 메타데이터와 사용자 정의 로그를 기록합니다.또한 DOM을 사용하여 페이지에 HTML과 CSS를 기록하여 가장 복잡한 단일 페이지 응용 프로그램이라도 픽셀 수준의 비디오를 재구성합니다.
 
Try it for free .
게시물 How async components can optimize performance in Vue apps이 LogRocket Blog에 먼저 올라왔습니다.