Vue專案中使用非同步組件來優化效能-Vue.js-PHP中文網

首頁

web前端

Vue.js

Vue專案中使用非同步組件來優化效能

青灯夜游

Sep 28, 2020 pm 05:33 PM

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，並將其內容替換為以下內容：

<!--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，然後查看您的基本元件：

Vue專案中使用非同步組件來優化效能

#現在，每次載入應用程式時載入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專案中使用非同步組件來優化效能

使用非同步元件建立一個Vue應用程式

##讓我們繼續建立一個基本的圖書捐贈應用程序，以展示如何利用非同步組件。最後，我們只想在使用者點擊

Donate按鈕時載入Donate元件。

首先，讓我們導航到終端並在我們的專案資料夾中安裝

vue-material。我們將使用這個樣式的應用程式:

cd book-project
npm i vue-material

我們將在應用程式中包括

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;)

現在，讓我們來建立先前建立的

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元件已經透過