vue router路由懶載入

2021-10-20 19:54:09 字數 598 閱讀 4316

//方式一:結合vue的非同步元件和webpack的**分析

const

home

=resolve=>

)}

//方式二:amd寫法

const

about

=resolve=>

require([

'../components/about.vue'

],resolve)

//方式三:在es6中,我們可以有更加簡單的寫法來組織vue非同步元件和webpack的**分割

const

home=(

)=>

import

('../components/home.vue'

)

懶載入的效果

在終端輸入:npm run build

懶載入幾個,就會在/static/js 生成幾個js檔案,如右圖所示

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 路由懶載入

懶載入模式 大專案中,為了提高初始化頁面的效率,路由一般使用懶載入模式,一共三種實現方式。1 第一種寫法 component resolve require components one resolve 2 第二種寫法 component import components two 這樣 const...