vue-router路由懶加載


懶加載:也叫延遲加載。即在需要的時候進行加載,隨用隨載。

為什么需要懶加載?

      像vue這種單頁面應用,如果沒有應用懶加載,運用webpack打包后的文件將會異常的大,造成進入首頁時,需要加載的內容過多,時間過長,會出啊先長時間的白屏,即使做了loading也是不利於用戶體驗,而運用懶加載則可以將頁面進行划分,需要的時候加載頁面,可以有效的分擔首頁所承擔的加載壓力,減少首頁加載用時.

簡單的說就是:進入首頁不用一次加載過多資源造成用時過長!!!

如何實現?

懶加載寫法:

 

 非懶加載的路由配置:

 

  還有一點:是我遇到的如果你遇到了就看下——就是用了懶加載后打完包直接運行那個index.html會報錯,報文件引用錯誤其實是打包時候路徑配置有點問題修改下就好了

如下圖:

 

 找到build下面的webpack.prod.conf.js   添加   publicPath:"./",

路由懶加載和非懶加載的差別:
1、在項目中切換路由,明顯可以看到,非懶加載只有在初次切換路由時加載所有的路由js文件,懶加載每次切換路由會加載新的js。(切換相同路由使用緩存不算)

 

 2、打包項目后可見,非懶加載所有路由相關js都打包在0*.js文件中了,路由懶加載多出很多js,從原來0*.js文件中抽離出來,導致明顯0*.js文件體積減小。

 

 

轉自:https://www.cnblogs.com/kelly07/p/8630178.html

https://blog.csdn.net/Beam007/article/details/93193486


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM