優化使用異步組件的VUE應用程序的性能

鑰匙要點

• >異步組件和WebPack的代碼拆分功能可以在VUE應用程序中使用，以在應用程序初始渲染後加載頁面的一部分，減少初始加載時間並改善應用程序性能。
>
• vue conters for動態導入，一種類似功能的導入形式，它返回包含所請求的（vue）組件的承諾，使模塊可以使用表達式加載。
>
• >異步組件可以有條件加載，只有在真正需要的時候加載它們，這可以通過設置參數來實現，以在用戶執行特定操作時為真。
>可以定義加載和/或錯誤組件，以便何時async組件花費一些時間來加載或未加載，這對於顯示加載動畫或錯誤消息可能很有用。
• >

想從頭開始學習vue.js嗎？通過SitePoint Premium獲取全部涵蓋基本面，項目，技巧和工具等的VUE書籍的集合。立即以每月的價格為$ 14.99。 >單頁應用程序有時會使他們的初始負載緩慢一點。這是因為傳統上，服務器將向客戶端發送一大堆JavaScript，必須在屏幕上顯示任何內容之前下載和解析。您可以想像，隨著您的應用程序的尺寸，這可能會變得越來越有問題。 > 幸運的是，當使用VUE CLI（使用引擎蓋下的Webpack）構建VUE應用程序時，可以採取許多措施來抵消此問題。在本文中，我將演示如何利用異步組件和WebPack的代碼拆分功能，以在應用程序初始渲染後加載頁面的某些部分。這將使最初的負載時間降至最低，並給您的應用帶來更刺耳的感覺。

要遵循本教程，您需要對vue.js和node.js.

的基本了解

異步組件

>我們潛入創建異步組件之前，讓我們看一下通常如何加載組件。為此，我們將使用一個非常簡單的消息組件：

>

>現在我們已經創建了組件，讓我們將其加載到app.vue文件中並顯示。我們只能導入組件並將其添加到組件選項中，以便我們可以在模板中使用它：

但是現在會發生什麼呢？每當應用程序加載時，將加載消息組件，因此將其包含在初始加載中。對於簡單的應用程序來說，這聽起來可能不是一個巨大的問題，而是考慮更複雜的網絡商店。想像一下，用戶將項目添加到籃子中，然後想退房，因此單擊“結帳”按鈕，該按鈕呈現一個包裝盒，其中包含所選項目的所有詳細信息。使用上述方法，此結帳框將包含在初始捆綁包中，儘管我們只需要在用戶單擊“結帳”按鈕時需要組件。用戶甚至有可能無需單擊“結帳”按鈕在網站上導航，這意味著在加載此潛在未使用的組件時浪費資源是沒有意義的。

為提高應用程序的效率，我們可以將懶惰加載和代碼分裂技術結合起來。

>懶惰的加載都是關於延遲組件的初始負載。您可以看到在Medium.com之類的站點上的懶惰加載，在此圖像之前，將圖像加載到需要之前。這很有用，因為我們不必浪費資源來提前加載特定帖子的所有圖像，因為讀者可能會跳過一篇文章。

>代碼拆分功能WebPack提供允許您將代碼拆分為各種捆綁包，然後可以按需加載或在以後的時間點上並行加載。它只能在需要或使用時才用於加載特定的代碼。

>

動態導入

幸運的是，使用一種稱為動態導入的東西來迎合這種情況。此功能引入了一種新的功能狀導入形式，該形式將返回包含所請求（VUE）組件的承諾。由於導入是接收字符串的函數，因此我們可以執行強大的操作，例如使用表達式加載模塊。 自61版以來，Chrome已在Chrome中使用動態導入。有關它們的更多信息，請訪問Google Developers網站。

>代碼拆分是由WebPack，lollup或parcel等捆綁機照顧的，這些捆綁包了解動態導入語法，並為每個動態導入的模塊創建一個單獨的文件。稍後，我們將在控制台的網絡選項卡中看到這一點。但是首先，讓我們看一下靜態和動態導入之間的區別：>

現在，讓我們將此知識應用於我們的消息組件，我們將獲得一個app.vue組件，看起來像這樣：

如您所見，Emport（）函數將解決返回組件的承諾，這意味著我們已經成功地加載了組件。如果您在DevTools的網絡選項卡中查看，您會注意到一個名為0.js的文件，其中包含您的異步組件。

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

有條件地加載異步組件

>現在，我們已經可以處理異步組件，讓我們真正需要在真正需要時加載它們來真正收穫它們的力量。在本文的上一節中，我解釋了僅在用戶鍵入結帳按鈕時加載的結帳框的用例。讓我們構建它。

>項目設置

如果您沒有安裝Vue CLI，則應立即抓取：>

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

接下來，使用CLI創建一個新項目，在提示時選擇默認預設：

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

>更改為項目目錄，然後安裝螞蟻 - 設計庫庫，我們將使用該庫來進行樣式：>

接下來，在src/main.js中導入螞蟻設計庫：

<span>// static import
</span><span>import <span>Message</span> from "./Message";
</span>
<span>// dynamic import
</span><span>import("./Message").then(<span>Message</span> => {
</span>  <span>// Message module is available here...
</span><span>});
</span>

最後，在src/comonents中創建兩個新組件

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

使商店視圖

>打開src/app.vue並用以下內容替換代碼：>

<span>npm i -g @vue/cli
</span>

>這裡沒有任何幻想。我們要做的就是顯示一條消息並渲染組件。

>

接下來，打開src/components/items.vue並添加以下代碼：>

vue create my-store

在此文件中，我們顯示了一個購物車圖標，其中包含當前購買的物品數量。項目本身是從項目數組中提取的，稱為數據屬性。如果您單擊項目的

購買

>按鈕，則調用AddItem方法，該方法將將相關項目推向購物清單數組。反過來，這將增加購物車的總數。

>我們還向頁面上添加了一個

結帳

<span>cd my-store
</span><span>npm i ant-design-vue
</span>

按鈕，這是事物開始變得有趣的地方：

>用戶單擊此按鈕時，我們將參數顯示為真。對於有條件加載我們的異步組件的目的，此真實值非常重要。

下面的幾行，您可以找到一個V-if語句，該語句僅顯示顯示為true時

的內容。此

標籤包含結帳組件，我們只想在用戶點擊結帳按鈕時加載它。

結帳組件在<script>部分的組件選項中異步加載。這裡很酷的事情是，我們甚至可以通過V-Bind語句將參數傳遞給組件。如您所見，創建有條件的異步組件相對容易：</script>>

<span>import 'ant-design-vue/dist/antd.css'
</span>

>讓我們快速添加SRC/COMPONENTS/COBLECT.VUE中的結帳組件的代碼

>在這裡，我們正在瀏覽我們作為購物列表的道具並將其輸出到屏幕上。

>您可以使用NPM運行服務命令運行該應用程序。然後導航到http：// localhost：8080/。如果所有內容都按計劃進行，您應該看到下圖中顯示的內容。

<span>touch src/components/{Checkout.vue,Items.vue}
</span>

嘗試使用網絡選項卡打開在商店周圍單擊，以確保您只有在單擊> nceckout 按鈕時才加載結帳組件。

>

您還可以在GitHub上找到此演示的代碼。

> 帶有加載和錯誤組件的異步

>甚至可以為何時加載或無法加載的時間定義加載和/或錯誤組件。顯示加載動畫可能很有用，但請記住，這再次減慢了您的應用程序。異步組件應較小且快速加載。這是一個示例：

結論

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

創建和實現異步組件非常容易，應該是標准開發程序的一部分。從UX的角度來看，盡可能減少初始加載時間以保持用戶的注意很重要。希望本教程能夠幫助您加載自己的組件異步，並將條件應用於延遲（懶負載）組件的負載。

>

vue async組件的常見問題

使用VUE ASYNC組件？

> vue async組件是vue.js中的一個強大功能，該功能使開發人員可以異步加載組件。這意味著僅在需要時加載組件，這可以顯著提高應用程序的性能。這對於大型應用程序尤其有益，在大型應用程序中，立即加載所有組件可以減慢應用程序的速度。通過異步加載組件，您可以確保您的應用程序保持快速和響應迅速，提供更好的用戶體驗。您的應用程序相對簡單。您可以使用vue.component方法並在出廠功能中返回承諾。承諾應通過組件定義解決。這是一個基本示例：

vue.component（'async-example'，function（resolve，refffect'

resolve（{{

template：'

i是async！ div>'}）

}，1000）
}）延遲1秒後是否會異步加載。

>我可以使用帶有Vue路由器的Vue Async組件嗎？
是的，您可以將帶有VUE路由器的Vue Async組件使用。實際上，Vue路由器對組件分裂和異步加載具有內置支持。在定義路線時，您可以提供一個返回諾言可以解決組件的承諾的函數。這使您只能在需要時加載組件，從而提高應用程序的性能。 >

> vue async組件和常規VUE組件之間有什麼區別？

> vue async組件與常規Vue組件之間的主要區別在於它們的加載方式。常規VUE組件同步加載，這意味著在應用程序啟動時會立即加載它們。另一方面，Vue異步組件異步加載，這意味著僅在需要時加載它們。這可以顯著提高您的應用程序的性能，尤其是對於具有許多組件的大型應用程序。

>

>在使用Vue Async組件時如何處理錯誤？

>在使用VUE ASYNC組件時，您可以處理。通過為vue.component方法提供第二個函數來錯誤。如果承諾被拒絕，將調用此功能。這是一個示例：

vue.component（'async-example'，function（resolve，reffacs）{settimeout（function（）{ //將組件定義傳遞給RESOVE CALLEVER CALKEND
resolve（{{
模板：'

i是async！

'
}）
}，1000）
}，function（quasition）{
console。錯誤（原因）
}）
在此示例中，如果拒絕承諾，則該錯誤將記錄到控制台。
>
我可以使用帶有vuex的vue async組件？ 🎜>是的，您可以使用帶VUEX的VUE ASYNC組件。 Vuex是VUE.JS的州管理庫，它可以與Vue Async組件合作。您可以像常規組件一樣從異步組件進行調查並從異步組件進行突變。
>

>如何測試vue async組件？

>測試vue async組件類似於測試常規VUE組件類似。您可以使用Vue Test Utils和Jest之類的庫來為您的組件編寫單元測試。但是，由於異步組件是異步加載的，因此您可能需要在測試中使用異步/等待等待等待組件在執行斷言之前加載該組件。

>

我可以使用vue async compotents帶有vue cli嗎？ >

是的，您可以使用帶VUE CLI的VUE ASYNC組件。 Vue CLI是用於腳手架Vue.js項目的命令行工具，它具有對異步組件的內置支持。您可以使用vue.component方法來定義Vue CLI項目中的異步組件。

>

>我如何優化VUE ASYNC組件的性能？

>

>有幾種方法可以優化優化的性能VUE異步組件。一種方法是使用代碼拆分，這使您可以將代碼拆分為可以按需加載的較小塊。另一種方法是使用懶惰加載，該加載允許您僅在需要時加載組件。當瀏覽器閒置時，您也可以使用預取預約和預加載在後台加載組件。

>我可以將vue async組件與nuxt.js？

>是的，您可以將vue async組件與nuxt.js一起使用。 NUXT.JS是用於構建vue.js應用程序的框架，並且對異步組件具有內置支持。您可以使用vue.component方法來定義nuxt.js項目中的異步組件。

以上是優化使用異步組件的VUE應用程序的性能的詳細內容。更多資訊請關注PHP中文網其他相關文章！