使用異步組件優(yōu)化Vue應(yīng)用程序的性能
單頁應(yīng)用其一個(gè)問題是首屏屏渲染速度較慢。這是因?yàn)轫撁媸状渭虞d時(shí)服務(wù)器將向客戶端發(fā)送大量JavaScript，在屏幕上顯示任何內(nèi)容之前必須下載并解析?？梢韵胂?，隨著應(yīng)用程序規(guī)模的擴(kuò)大，這個(gè)問題對(duì)用戶體驗(yàn)的影響也會(huì)越來越突出。
現(xiàn)在幸運(yùn)的是，當(dāng)使用Vue CLI構(gòu)建Vue應(yīng)用程序時(shí)（使用webpack），可以采取一些措施來抵消這種情況。在本文中，我將演示如何在應(yīng)用程序的初始渲染之后使用 異步組件 和webpack的代碼分割功能加載到頁面的某些部分。這將使初始加載時(shí)間降至最低，并為您的應(yīng)用程序提供更好的用戶體驗(yàn)。
認(rèn)識(shí)異步組件
在我們開始創(chuàng)建異步組件之前，讓我們看一下我們通常如何加載組件。為此，我們將使用一個(gè)非常簡(jiǎn)單的消息組件作為例子：
<!-- Message.vue --> <template> <h1>New message!</h1> </template>
現(xiàn)在我們已經(jīng)創(chuàng)建了我們的 Message 組件，讓我們將它加載到我們的文件中并顯示它。我們可以導(dǎo)入組件并將其添加到組件選項(xiàng)中，以便我們可以在模板中使用它：
<!-- App.vue -->
<template>
<div>
<message></message>
</div>
</template>
<script>
import Message from "./Message";
export default {
components: {
Message
}
};
</script>
但現(xiàn)在發(fā)生了什么？只要應(yīng)用程序加載，就會(huì)加載 Message 組件，因此它包含在初始加載過程中。
對(duì)于一個(gè)簡(jiǎn)單的應(yīng)用程序來說，這看起來可能不是一個(gè)大問題，但可以考慮像電商網(wǎng)站這樣復(fù)雜的場(chǎng)景。想象一下，用戶將項(xiàng)目添加到購(gòu)物車，然后想要結(jié)帳，因此單擊結(jié)帳按鈕會(huì)生成一個(gè)包含所選商品的所有詳細(xì)信息的框。使用上述方法，此結(jié)帳框?qū)诔跏及?，但我們只需在用戶單擊結(jié)帳按鈕時(shí)使用該組件。用戶甚至可以在不點(diǎn)擊結(jié)賬按鈕的情況下瀏覽網(wǎng)站，這意味著在加載這個(gè)可能不會(huì)使用的組件時(shí)浪費(fèi)資源是沒有意義的。
為了提高應(yīng)用程序的效率，我們可以結(jié)合延遲加載和代碼分割技術(shù)。
Webpack提供的代碼拆分功能允許您將代碼拆分為各種捆綁包，然后可以按需加載或稍后并行加載。它只能在需要或使用時(shí)加載特定的代碼片段。
Dynamic Imports(動(dòng)態(tài)導(dǎo)入)
Vue使用Dynamic Imports解決這種情況。此功能引入了一種新的類似函數(shù)的導(dǎo)入形式，它將返回包含（Vue）組件的Promise。由于import是一個(gè)接收字符串的函數(shù)，我們可以做一些強(qiáng)大的事情，比如使用表達(dá)式加載模塊。自版本61以來，Chrome中已提供動(dòng)態(tài)導(dǎo)入。有關(guān)這些內(nèi)容的詳細(xì)信息， 請(qǐng)?jiān)L問Google Developers網(wǎng)站 。
代碼拆分由webpack，Rollup或Parcel等捆綁器處理，它們解析動(dòng)態(tài)導(dǎo)入語法并為每個(gè)動(dòng)態(tài)導(dǎo)入的模塊創(chuàng)建單獨(dú)的文件。稍后我們將在控制臺(tái)的網(wǎng)絡(luò)選項(xiàng)卡中看到這一點(diǎn)。但首先，我們來看看靜態(tài)和動(dòng)態(tài)導(dǎo)入之間的區(qū)別：
// static import
import Message from "./Message";
// dynamic import
import("./Message").then(Message => {
// Message module is available here...
});
現(xiàn)在，讓我們將這些知識(shí)應(yīng)用到我們的 Message 組件中，我們將得到一個(gè)如下所示的組件： App.vue
<!-- App.vue -->
<template>
<div>
<message></message>
</div>
</template>
<script>
import Message from "./Message";
export default {
components: {
Message: () => import("./Message")
}
};
</script>
如你所見，函數(shù)import()將解析返回組件的Promise，這意味著我們已成功異步加載組件。如果您查看 devtools 的 network 選項(xiàng)卡，您會(huì)注意到一個(gè)名為 0.js 包含異步組件的文件。
根據(jù)條件加載異步組件
現(xiàn)在我們已經(jīng)掌握了異步組件，讓我們僅在真正需要時(shí)加載它們。在本文的上一節(jié)中，我解釋了僅在用戶點(diǎn)擊結(jié)帳按鈕時(shí)才加載的結(jié)帳框的用例。讓我們把它構(gòu)建出來。
項(xiàng)目設(shè)置
如果您沒有安裝 vue/cli ，首先應(yīng)該安裝它：
npm i -g @vue/cli
接下來，使用CLI創(chuàng)建新項(xiàng)目，在出現(xiàn)提示時(shí)選擇默認(rèn)預(yù)設(shè)即可：
vue create my-store
轉(zhuǎn)到項(xiàng)目目錄，然后安裝我們將用于樣式的ant-design-vue庫(kù)：
cd my-store npm i ant-design-vue
接下來，導(dǎo)入Ant設(shè)計(jì)庫(kù)： src/main.js
import 'ant-design-vue/dist/antd.css'
最后我們?cè)?src/comonents 里創(chuàng)建兩個(gè)新組件 Checkout.vue 和 Items.vue ：
touch src/components/{Checkout.vue,Items.vue}
寫一個(gè)商店的視圖層
打開 src/App.vue 并用以下代碼替換文件里代碼：
<template>
<div id="app">
<h1>{{ msg }}</h1>
<items></items>
</div>
</template>
<script>
import items from "./components/Items"
export default {
components: {
items
},
name: 'app',
data () {
return {
msg: 'My Fancy T-Shirt Store'
}
}
}
</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;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
這里沒有什么花哨的東西。我們所做的只是顯示一條消息并渲染一個(gè) <items> 組件。
接下來，打開 src/components/Items.vue 并添加以下代碼：
<template>
<div>
<div style="padding: 20px;">
<Row :gutter="16">
<Col :span="24" style="padding:5px">
<Icon type="shopping-cart" style="margin-right:5px"/>{{shoppingList.length}} item(s)
<Button @click="show = true" id="checkout">Checkout</Button>
</Col>
</Row>
</div>
<div v-if="show">
<Row :gutter="16" style="margin:0 400px 50px 400px">
<checkout v-bind:shoppingList="shoppingList"></checkout>
</Row>
</div>
<div style="background-color: #ececec; padding: 20px;">
<Row :gutter="16">
<Col :span="6" v-for="(item, key) in items" v-bind:key="key" style="padding:5px">
<Card v-bind:title="item.msg" v-bind:key="key">
<Button type="primary" @click="addItem(key)">Buy ${{item.price}}</Button>
</Card>
</Col>
</Row>
</div>
</div>
</template>
<script>
import { Card, Col, Row, Button, Icon } from 'ant-design-vue';
export default {
methods: {
addItem (key) {
if(!this.shoppingList.includes(key)) {
this.shoppingList.push(key);
}
}
},
components: {
Card, Col, Row, Button, Icon,
checkout: () => import('./Checkout')
},
data: () => ({
items: [
{ msg: 'First Product', price: 9.99 },
{ msg: 'Second Product', price: 19.99 },
{ msg: 'Third Product', price: 15.00 },
{ msg: 'Fancy Shirt', price: 137.00 },
{ msg: 'More Fancy', price: 109.99 },
{ msg: 'Extreme', price: 3.00 },
{ msg: 'Super Shirt', price: 109.99 },
{ msg: 'Epic Shirt', price: 3.00 },
],
shoppingList: [],
show: false
})
}
</script>
<style>
#checkout {
background-color:#e55242;
color:white;
margin-left: 10px;
}
</style>
在此文件中，我們顯示一個(gè)帶有商品數(shù)量的購(gòu)物車圖標(biāo)。商品是從 items 數(shù)組中提取的。如果單擊項(xiàng)目的 Buy 按鈕，將會(huì)調(diào)用 addItem 方法，該方法會(huì)將相關(guān)商品push到 shoppingList 數(shù)組中。從而增加購(gòu)物車的總數(shù)。
我們還在頁面中添加了一個(gè) Checkout 按鈕：
<Button @click="show = true" id="checkout">Checkout</Button>
當(dāng)用戶點(diǎn)擊這個(gè)按鈕，我們?cè)O(shè)置的參數(shù) show 是 true 。 true 是非常重要對(duì)于有通過條件地加載我們的異步組件。
在接下來的幾行中，您可以找到 v-if 的聲明，這個(gè)語句僅用來顯示我們 checkout 組件的 <div> ，但是我們只想在用戶點(diǎn)擊 Checkout 按鈕時(shí)顯示結(jié)賬組件，我們?cè)撛趺崔k？
這里我們將 checkout 組件在 components 選項(xiàng)里異步加載。這里 v-bind 將參數(shù)傳遞給組件。正如你看的的這樣，創(chuàng)建條件異步組件是很容易的：
<div v-if="show"> <checkout v-bind:shoppingList="shoppingList"></checkout> </div>
讓我們快速 Checkout 組件添加下面的代碼在 src/components/Checkout.vue 里：
<template>
<Card title="Checkout Items" key="checkout">
<p v-for="(k, i) in this.shoppingList" :key="i">
Item: {{items[Number(k)].msg}} for ${{items[Number(k)].price}}
</p>
</Card>
</template>
<script>
import { Card } from 'ant-design-vue';
export default {
props: ['shoppingList'],
components: {
Card
},
data: () => ({
items: [
{ msg: 'First Product', price: 9.99 },
{ msg: 'Second Product', price: 19.99 },
{ msg: 'Third Product', price: 15.00 },
{ msg: 'Fancy Shirt', price: 137.00 },
{ msg: 'More Fancy', price: 109.99 },
{ msg: 'Extreme', price: 3.00 },
{ msg: 'Super Shirt', price: 109.99 },
{ msg: 'Epic Shirt', price: 3.00 },
]
})
}
</script>
在這里，我們將接收一個(gè) shoppingList 并把他輸出到屏幕上。
您可以使用該 npm run serve 命令運(yùn)行該應(yīng)用程序。然后導(dǎo)航到 http：// localhost：8080 。如果一切按計(jì)劃進(jìn)行，你應(yīng)該會(huì)看到如下圖所示的內(nèi)容。
可以嘗試打開在 network 選項(xiàng)卡,點(diǎn)擊Checkout按鈕，可以發(fā)現(xiàn) network 里將異步加載 結(jié)賬組件 。
您還可以在GitHub上查看此演示的代碼 。
為異步組件添加加載中和加載錯(cuò)誤組件
有時(shí)異步組件加載過長(zhǎng)或加載時(shí)。顯示加載動(dòng)畫或錯(cuò)誤信息可能很有用，但要支持這會(huì)再次降低應(yīng)用程序的速度。異步組件應(yīng)該小而且加載速度快。這是一個(gè)例子：
const Message = () => ({
component: import("./Message"),
loading: LoadingAnimation,
error: ErrorComponent
});
總結(jié)
創(chuàng)建和實(shí)現(xiàn)異步組件非常簡(jiǎn)單，應(yīng)該成為標(biāo)準(zhǔn)開發(fā)例程的一部分。從用戶體驗(yàn)的角度來看，盡可能減少初始加載時(shí)間以保持用戶的注意力是非常重要。希望本教程可以幫助您構(gòu)建異步加載組件。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
前端vue?uni-app?cc-countdown倒計(jì)時(shí)組件使用詳解
cc-countdown是一個(gè)倒計(jì)時(shí)組件，它可以顯示剩余時(shí)間、天數(shù)、小時(shí)數(shù)、分鐘數(shù)和秒數(shù)，在本文中，我們將介紹如何在uni-app中使用cc-countdown組件,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue組件橫向樹實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
一文搞懂Vue3中toRef和toRefs函數(shù)的使用
這篇文章主要為大家介紹了Vue3中toRef和toRefs函數(shù)的使用方法，文中通過示例為大家進(jìn)行了詳細(xì)的講解，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-07-07
Vue 全家桶實(shí)現(xiàn)移動(dòng)端酷狗音樂功能
這篇文章主要介紹了Vue 全家桶實(shí)現(xiàn)移動(dòng)端酷狗音樂功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue恢復(fù)初始數(shù)據(jù)this.$data,this.$options.data()解析
這篇文章主要介紹了vue恢復(fù)初始數(shù)據(jù)this.$data，this.$options.data()解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Vue3?中的?watchEffect?特性詳解,watchEffect?是?Vue3?中非常有用的一個(gè)特性，它可以讓我們輕松地監(jiān)聽響應(yīng)式數(shù)據(jù)的變化，并在數(shù)據(jù)發(fā)生變化時(shí)執(zhí)行指定的回調(diào)函數(shù)，從而簡(jiǎn)化代碼并提高應(yīng)用的性能，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue中的computed?和?vm.$data?原理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue3 openlayers加載瓦片地圖并手動(dòng)標(biāo)記坐標(biāo)點(diǎn)功能
這篇文章主要介紹了 Vue3 openlayers加載瓦片地圖并手動(dòng)標(biāo)記坐標(biāo)點(diǎn)功能,我們這里用vue/cli創(chuàng)建,我用的node版本是18.12.1,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
vue 2.0項(xiàng)目中如何引入element-ui詳解
element-ui是一個(gè)比較完善的UI庫(kù),但是使用它需要有一點(diǎn)vue的基礎(chǔ)，下面這篇文章主要給大家介紹了關(guān)于在vue 2.0項(xiàng)目中如何引入element-ui的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
這篇文章主要為大家詳細(xì)介紹了vue面包屑組件的封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09