單頁應(yīng)用其一個(gè)問題是首屏屏渲染速度較慢。這是因?yàn)轫撁媸状渭虞d時(shí)服務(wù)器將向客戶端發(fā)送大量JavaScript，在屏幕上顯示任何內(nèi)容之前必須下載并解析。可以想象，隨著應(yīng)用程序規(guī)模的擴(kuò)大，這個(gè)問題對(duì)用戶體驗(yàn)的影響也會(huì)越來越突出。

站在用戶的角度思考問題，與客戶深入溝通，找到定遠(yuǎn)網(wǎng)站設(shè)計(jì)與定遠(yuǎn)網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：做網(wǎng)站、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋定遠(yuǎn)地區(qū)。

現(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è)非常簡單的消息組件作為例子：

現(xiàn)在我們已經(jīng)創(chuàng)建了我們的 Message 組件，讓我們將它加載到我們的文件中并顯示它。我們可以導(dǎo)入組件并將其添加到組件選項(xiàng)中，以便我們可以在模板中使用它：

但現(xiàn)在發(fā)生了什么？只要應(yīng)用程序加載，就會(huì)加載 Message 組件，因此它包含在初始加載過程中。

對(duì)于一個(gè)簡單的應(yīng)用程序來說，這看起來可能不是一個(gè)大問題，但可以考慮像電商網(wǎng)站這樣復(fù)雜的場景。想象一下，用戶將項(xiàng)目添加到購物車，然后想要結(jié)帳，因此單擊結(jié)帳按鈕會(huì)生成一個(gè)包含所選商品的所有詳細(xì)信息的框。使用上述方法，此結(jié)帳框?qū)诔跏及校覀冎恍柙谟脩魡螕艚Y(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

如你所見，函數(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庫：

cd my-store
npm i ant-design-vue

接下來，導(dǎo)入Ant設(shè)計(jì)庫： 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 并用以下代碼替換文件里代碼：

這里沒有什么花哨的東西。我們所做的只是顯示一條消息并渲染一個(gè) 組件。

接下來，打開 src/components/Items.vue 并添加以下代碼：

在此文件中，我們顯示一個(gè)帶有商品數(shù)量的購物車圖標(biāo)。商品是從 items 數(shù)組中提取的。如果單擊項(xiàng)目的 Buy 按鈕，將會(huì)調(diào)用 addItem 方法，該方法會(huì)將相關(guān)商品push到 shoppingList 數(shù)組中。從而增加購物車的總數(shù)。

我們還在頁面中添加了一個(gè) Checkout 按鈕：

Checkout

當(dāng)用戶點(diǎn)擊這個(gè)按鈕，我們?cè)O(shè)置的參數(shù) show 是 true 。 true 是非常重要對(duì)于有通過條件地加載我們的異步組件。

在接下來的幾行中，您可以找到 v-if 的聲明，這個(gè)語句僅用來顯示我們 checkout 組件的

const Message = () => ({
 component: import("./Message"),
 loading: LoadingAnimation,
 error: ErrorComponent
});