vue router路由懶載入,減少首頁載入時間

2021-10-07 07:35:30 字數 395 閱讀 4425

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

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

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

路由://修改src/router/index.js檔案

import vue from 『vue』

import router from 『vue-router』

vue.use(router)

export default new router(]})

vue router 路由懶載入

1 通常在我們使用 vue cli 構建專案時,在預設情況下 執行npm run build 後會將專案中所有的 js 打包為乙個整體。而且這個包體積會非常的大。導致我們在進入首頁時會載入的非常慢。即使初始化有 loading 效果,也不利於使用者體驗。所以這是就體現出懶載入 延遲載入 的重要性。所...

Vue Router(路由懶載入)

常用的路由懶載入方式 1 vue非同步元件 非同步載入 2 路由懶載入 使用import vue非同步元件 非同步載入 vue router配置路由 使用vue的非同步元件技術 可以實現按需載入 但是,這種情況下,webpack打包時乙個元件生成乙個js檔案,即每載入乙個元件都需要載入乙個新的js檔...

vue router路由懶載入

方式一 結合vue的非同步元件和webpack的 分析 const home resolve 方式二 amd寫法 const about resolve require components about.vue resolve 方式三 在es6中,我們可以有更加簡單的寫法來組織vue非同步元件和we...