vue的路由懶載入

2021-09-08 21:27:00 字數 485 閱讀 4084

為什麼需要懶載入?

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

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

如何實現?

懶載入寫法:

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

如下圖:

vue路由懶載入

import vue from vue import vuerouter from vue router vue.use vuerouter var router new vuerouter routes name 登陸 path component resolve require.ensure r...

vue路由懶載入

方法一 resolve 這一種方法較常見。它主要是使用了resolve的非同步機制,用require代替了import,實現按需載入,下面是 示例 import vue from vue import router from vue router import helloworld from com...

Vue路由懶載入

常用的懶載入方式有兩種 即使用vue非同步元件和es中的import 未使用懶載入 import vue from vue import router from vue router import helloworld from components helloworld 未用懶載入 vue.use...