在使用JavaScript框架創(chuàng)建大型應用程序時,考慮組件結(jié)構(gòu)非常重要。通過考慮組件結(jié)構(gòu),可以避免在運行時加載每個組件并減慢應用程序的速度。在構(gòu)建應用程序時,您還可以避免向用戶返回不必要的數(shù)據(jù)或創(chuàng)建整體糟糕的用戶體驗。
創(chuàng)新互聯(lián)建站專注于澄海網(wǎng)站建設(shè)服務及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供澄海營銷型網(wǎng)站建設(shè),澄海網(wǎng)站制作、澄海網(wǎng)頁設(shè)計、澄海網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)服務,打造澄海網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供澄海網(wǎng)站排名全網(wǎng)營銷落地服務。React和Angular等框架分別使用React.lazy()
和路由模型來考慮組件結(jié)構(gòu)。
在這篇文章中,我們將實現(xiàn)兩個演示,看看Vue如何使用異步組件,通過使用延遲加載和代碼分割技術(shù)來減少應用程序的加載時間。
在Vue中創(chuàng)建組件
為了理解它是如何工作的,讓我們從創(chuàng)建一個基本組件開始。
導航到您的終端,安裝Vue的CLI,并創(chuàng)建一個項目:
npm install -g vue/cli vue create book-project #choose the default setting when prompted
在我們的新項目文件夾中,讓我們替換默認文件的內(nèi)容,其中包括helloworld.vue
和app.vue
。我們將從創(chuàng)建圖書捐贈頁面開始。將helloworld.vue
重命名為book.vue
,并將其內(nèi)容替換為以下內(nèi)容:
<!--Book.vue--> <template> <h1>Donate Books</h1> </template>
然后,用以下內(nèi)容替換App.vue
的內(nèi)容:
<!--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
組件是靜態(tài)導入的。 這意味著Book
組件在每次加載應用程序時都會加載。
接下來,在終端中運行npm run serve
,導航至localhost:8080
,然后查看您的基本組件:
現(xiàn)在,每次加載應用程序時加載Book
組件似乎不是一個重要的性能問題。但是,隨著應用程序越來越大,在運行時加載每個組件將變得很麻煩。
您的用戶不會與應用程序中的每個功能都進行交互,因此只提供他們需要的功能是有意義的。問題是,如何只加載用戶需要的內(nèi)容?
這就是延遲加載和代碼分割技術(shù)發(fā)揮作用的地方。延遲加載會延遲組件的初始加載,在用戶導航到位于頁面上的位置之前,會阻止加載圖像等資源。
代碼分割是webpack最初提供的一個特性。Webpack允許您將代碼分割成僅在需要時使用的各種包。
Vue通過一個稱為動態(tài)導入的特性執(zhí)行代碼分解。
此導入使用webpack(或任何模塊綁定器,如Parcel)異步加載組件。它的語法包含一個承諾,并包裝在一個箭頭函數(shù):
// dynamic import import("./components/Book").then(Book => { // Insert the Book module here });
讓我們實現(xiàn)這個在我們的App.vue組件:
<template> <div> <book></book> </div> </template> <script> export default { components: { Book: () => import("./components/Book") } }; </script>
在上面的代碼示例中,import()
函數(shù)返回Book
組件,這使我們能夠異步加載它。 如果我們在瀏覽器devtools
中查看“網(wǎng)絡(luò)”標簽,則有一個由App.js
發(fā)起的名為0.js
的文件。 該文件包含我們的異步組件:
使用異步組件創(chuàng)建一個Vue應用程序
讓我們繼續(xù)構(gòu)建一個基本的圖書捐贈應用程序,以展示如何利用異步組件。最后,我們只想在用戶單擊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')
現(xiàn)在,讓我們來構(gòu)建之前創(chuàng)建的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>
在上面的代碼塊中,圖書列表從圖書數(shù)組中檢索并顯示。如果用戶單擊每本書的按鈕,addBook()
方法將選擇的書推入selectList
數(shù)組,并顯示捐贈圖書的總數(shù)。
還有一個單獨的按鈕,專門用于加載異步組件。它的參數(shù)show
設(shè)置為true
。這使得v-if
語句能夠顯示donate
組件,該組件包含所選書籍的數(shù)量。
donate
組件已經(jīng)通過<script>
標記中的components
屬性動態(tài)導入。
讓我們創(chuàng)建donate
組件。在src/components
文件夾中,創(chuàng)建一個名為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: ['selectList'], data: () => ({ books: [ { name: 'Using Creatine', genre: 'Workouts' }, { name: 'Learn Parkour', genre: 'Sports' }, { name: 'Snorkelling', genre: 'Underwater' }, ] }) } </script>
導航到您的終端并運行npm run serve
。
如果應用程序編譯成功,在瀏覽器中打開localhost:8080
。當你在Devtools
中查看網(wǎng)絡(luò)標簽時點擊應用程序,當你點擊Donate
按鈕時,Donate
組件才會加載。
異步組件的錯誤處理
異步組件需要盡可能簡單,以便快速加載。但是,在我們的異步組件中定義加載和錯誤組件有助于處理加載狀態(tài)并在需要時顯示錯誤消息。
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>
現(xiàn)在,在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>
加載和錯誤狀態(tài)不會出現(xiàn),除非你有一個非常緩慢或錯誤的互聯(lián)網(wǎng)連接。為了測試它們是否工作正常,我們將timeout屬性設(shè)置為0,并嘗試加載應用程序。
結(jié)論
使用異步組件構(gòu)建大型應用程序是保持性能的關(guān)鍵。異步組件不僅可以確保由于更快的加載時間,您的保留率會更高,而且還可以幫助您更有效地檢測錯誤,因為組件的作用域是作為函數(shù)傳遞的。如果你想看看這個演示的源代碼,你可以在GitHub上找到它。
相關(guān)推薦:
2020年前端vue面試題大匯總(附答案)
vue教程推薦:2020最新的5個vue.js視頻教程精選
更多編程相關(guān)知識,請訪問:編程入門?。?
文章題目:Vue項目中使用異步組件來優(yōu)化性能
文章網(wǎng)址:http://muchs.cn/article42/cjpjhc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、網(wǎng)站收錄、微信小程序、手機網(wǎng)站建設(shè)、網(wǎng)站導航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)