Vue項(xiàng)目中怎么使用異步組件來優(yōu)化性能-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)Vue項(xiàng)目中怎么使用異步組件來優(yōu)化性能，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

在使用JavaScript框架創(chuàng)建大型應(yīng)用程序時(shí)，考慮組件結(jié)構(gòu)非常重要。通過考慮組件結(jié)構(gòu)，可以避免在運(yùn)行時(shí)加載每個(gè)組件并減慢應(yīng)用程序的速度。在構(gòu)建應(yīng)用程序時(shí)，您還可以避免向用戶返回不必要的數(shù)據(jù)或創(chuàng)建整體糟糕的用戶體驗(yàn)。

React和Angular等框架分別使用React.lazy（）和路由模型來考慮組件結(jié)構(gòu)。

在這篇文章中，我們將實(shí)現(xiàn)兩個(gè)演示，看看Vue如何使用異步組件，通過使用延遲加載和代碼分割技術(shù)來減少應(yīng)用程序的加載時(shí)間。

在Vue中創(chuàng)建組件

為了理解它是如何工作的，讓我們從創(chuàng)建一個(gè)基本組件開始。

導(dǎo)航到您的終端，安裝Vue的CLI，并創(chuàng)建一個(gè)項(xiàng)目:

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

在我們的新項(xiàng)目文件夾中，讓我們替換默認(rèn)文件的內(nèi)容，其中包括helloworld.vue和app.vue。我們將從創(chuàng)建圖書捐贈(zèng)頁面開始。將helloworld.vue重命名為book.vue，并將其內(nèi)容替換為以下內(nèi)容：

然后，用以下內(nèi)容替換App.vue的內(nèi)容：

在上面的代碼塊中，您會(huì)注意到Book組件是靜態(tài)導(dǎo)入的。 這意味著Book組件在每次加載應(yīng)用程序時(shí)都會(huì)加載。

接下來，在終端中運(yùn)行npm run serve，導(dǎo)航至localhost：8080，然后查看您的基本組件：

現(xiàn)在，每次加載應(yīng)用程序時(shí)加載Book組件似乎不是一個(gè)重要的性能問題。但是，隨著應(yīng)用程序越來越大，在運(yùn)行時(shí)加載每個(gè)組件將變得很麻煩。

您的用戶不會(huì)與應(yīng)用程序中的每個(gè)功能都進(jìn)行交互，因此只提供他們需要的功能是有意義的。問題是，如何只加載用戶需要的內(nèi)容?

這就是延遲加載和代碼分割技術(shù)發(fā)揮作用的地方。延遲加載會(huì)延遲組件的初始加載，在用戶導(dǎo)航到位于頁面上的位置之前，會(huì)阻止加載圖像等資源。

代碼分割是webpack最初提供的一個(gè)特性。Webpack允許您將代碼分割成僅在需要時(shí)使用的各種包。

Vue通過一個(gè)稱為動(dòng)態(tài)導(dǎo)入的特性執(zhí)行代碼分解。

此導(dǎo)入使用webpack(或任何模塊綁定器，如Parcel)異步加載組件。它的語法包含一個(gè)承諾，并包裝在一個(gè)箭頭函數(shù):

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

讓我們實(shí)現(xiàn)這個(gè)在我們的App.vue組件:

在上面的代碼示例中，import（）函數(shù)返回Book組件，這使我們能夠異步加載它。 如果我們?cè)跒g覽器devtools中查看“網(wǎng)絡(luò)”標(biāo)簽，則有一個(gè)由App.js發(fā)起的名為0.js的文件。 該文件包含我們的異步組件：

使用異步組件創(chuàng)建一個(gè)Vue應(yīng)用程序

讓我們繼續(xù)構(gòu)建一個(gè)基本的圖書捐贈(zèng)應(yīng)用程序，以展示如何利用異步組件。最后，我們只想在用戶單擊Donate按鈕時(shí)加載Donate組件。

首先，讓我們導(dǎo)航到終端并在我們的項(xiàng)目文件夾中安裝vue-material。我們將使用這個(gè)樣式的應(yīng)用程序:

cd book-project
npm i vue-material

我們將在應(yīng)用程序中包括vue-material導(dǎo)入它在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')

現(xiàn)在，讓我們來構(gòu)建之前創(chuàng)建的Book組件:

在上面的代碼塊中，圖書列表從圖書數(shù)組中檢索并顯示。如果用戶單擊每本書的按鈕，addBook()方法將選擇的書推入selectList數(shù)組，并顯示捐贈(zèng)圖書的總數(shù)。

還有一個(gè)單獨(dú)的按鈕，專門用于加載異步組件。它的參數(shù)show設(shè)置為true。這使得v-if語句能夠顯示donate組件，該組件包含所選書籍的數(shù)量。

donate組件已經(jīng)通過

導(dǎo)航到您的終端并運(yùn)行npm run serve。

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