帶你這麼認識vue-router『路由的懶加載』

認識路由的懶加載

官方的解釋:

• 當打包建構應用時，Javascript 包會變得非常大，影響頁面加載。
• 如果我們能把不同路由對應的元件分割成不同的代碼塊，然後當路由被通路的時候才加載對應元件，這樣就更加高效了

官方想表達的意思

• 首先，我們知道路由中通常會定義很多不同的頁面。
• 這個頁面最後被打包在哪裡呢? 一般情況下，是放在一個js檔案中。
• 但是，頁面這麼多放在一個js檔案中, 必然會造成這個頁面非常的大。
• 如果我們一次性從伺服器請求下來這個頁面， 可能需要花費一定的時間，甚至使用者的電腦上還出現了短暫空白的情況。

路由懶加載做了什麼?

• 路由懶加載的主要作用就是将路由對應的元件打包成一個個的js代碼塊
• 隻有在這個路由被通路到的時候, 才加載對應的元件

路由懶加載的效果

懶加載的方式

方式一: 結合Vue的異步元件和Webpack的代碼分析

方式二: AMD寫法

方式三: 在ES6中, 我們可以有更加簡單的寫法來組織Vue異步元件和Webpack的代碼分割