首先我們看看官方的解釋:
1.當(dāng)打包構(gòu)建應(yīng)用時(shí),Javascript 包會(huì)變得非常大佑惠,影響頁(yè)面加載朋腋。
2.如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊,然后當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件膜楷,這樣就更加高效了
官方解釋白話文:
首先, 我們知道路由中通常會(huì)定義很多不同的頁(yè)面這個(gè)頁(yè)面最后被打包在哪里呢? 一般情況下, 是放在一個(gè)js文件中.但是, 頁(yè)面這么多放在一個(gè)js文件中, 必然會(huì)造成這個(gè)頁(yè)面非常的大.如果我們一次性從服務(wù)器請(qǐng)求下來(lái)這個(gè)頁(yè)面, 可能需要花費(fèi)一定的時(shí)間, 甚至用戶的電腦上還出現(xiàn)了短暫空白的情況.如何避免這種情況呢? 使用路由懶加載就可以了.
路由懶加載做了什么?
路由懶加載的主要作用就是將路由對(duì)應(yīng)的組件打包成一個(gè)個(gè)的js代碼塊.
只有在這個(gè)路由被訪問(wèn)到的時(shí)候, 才加載對(duì)應(yīng)的組件
下面兩張圖是處理了懶加載和沒有處理的對(duì)比
image.png
可以很明顯的看出打包后的區(qū)別旭咽,采用了懶加載后,vue就可以按需加載組件了
以下是懶加載的幾種寫法赌厅,推薦第三種
image.png