單頁應用其一個問題是首屏屏渲染速度較慢。這是因為頁面首次加載時服務器將向客戶端發送大量JavaScript，在屏幕上顯示任何內容之前必須下載并解析。可以想象，隨著應用程序規模的擴大，這個問題對用戶體驗的影響也會越來越突出。

現在幸運的是，當使用Vue CLI構建Vue應用程序時（使用webpack），可以采取一些措施來抵消這種情況。在本文中，我將演示如何在應用程序的初始渲染之后使用 異步組件 和webpack的代碼分割功能加載到頁面的某些部分。這將使初始加載時間降至最低，并為您的應用程序提供更好的用戶體驗。

認識異步組件

在我們開始創建異步組件之前，讓我們看一下我們通常如何加載組件。為此，我們將使用一個非常簡單的消息組件作為例子：

<!-- Message.vue --><template> <h1>New message!</h1></template>

現在我們已經創建了我們的 Message 組件，讓我們將它加載到我們的文件中并顯示它。我們可以導入組件并將其添加到組件選項中，以便我們可以在模板中使用它：

<!-- App.vue --><template> <div> <message></message> </div></template><script>import Message from "./Message";export default { components: { Message }};</script>

但現在發生了什么？只要應用程序加載，就會加載 Message 組件，因此它包含在初始加載過程中。

對于一個簡單的應用程序來說，這看起來可能不是一個大問題，但可以考慮像電商網站這樣復雜的場景。想象一下，用戶將項目添加到購物車，然后想要結帳，因此單擊結帳按鈕會生成一個包含所選商品的所有詳細信息的框。使用上述方法，此結帳框將包含在初始包中，但我們只需在用戶單擊結帳按鈕時使用該組件。用戶甚至可以在不點擊結賬按鈕的情況下瀏覽網站，這意味著在加載這個可能不會使用的組件時浪費資源是沒有意義的。

為了提高應用程序的效率，我們可以結合延遲加載和代碼分割技術。

Webpack提供的代碼拆分功能允許您將代碼拆分為各種捆綁包，然后可以按需加載或稍后并行加載。它只能在需要或使用時加載特定的代碼片段。

Dynamic Imports(動態導入)

Vue使用Dynamic Imports解決這種情況。此功能引入了一種新的類似函數的導入形式，它將返回包含（Vue）組件的Promise。由于import是一個接收字符串的函數，我們可以做一些強大的事情，比如使用表達式加載模塊。自版本61以來，Chrome中已提供動態導入。有關這些內容的詳細信息， 請訪問Google Developers網站 。

代碼拆分由webpack，Rollup或Parcel等捆綁器處理，它們解析動態導入語法并為每個動態導入的模塊創建單獨的文件。稍后我們將在控制臺的網絡選項卡中看到這一點。但首先，我們來看看靜態和動態導入之間的區別：