Vue Router(路由懶載入)

2021-09-24 09:15:01 字數 713 閱讀 4478

常用的路由懶載入方式:

1、vue非同步元件(非同步載入)

2、路由懶載入(使用import)

vue非同步元件(非同步載入)

vue-router配置路由 , 使用vue的非同步元件技術 ,可以實現按需載入 。

但是,這種情況下,webpack打包時乙個元件生成乙個js檔案,即每載入乙個元件都需要載入乙個新的js檔案

/* vue非同步元件 */

,,

路由懶載入(使用import)

vue-router配置路由 , 使用import按需引入,沒有指定webpackchunkname時,每個元件打包成乙個js;指定webpackchunkname時,相同webpackchunkname名字的元件,會合併打包成乙個js檔案,把元件按組分塊。

/* 路由懶載入 */

//不指定webpackchunkname(每個分別打包成乙個js檔案)

,,//指定webpackchunkname(合併打包成乙個js檔案)

,,

個人認為,指定webpackchunkname時,使用頻率高的元件、同一功能的元件、有上下游關係的元件均可以合併打包到乙個元件中,這樣在載入乙個功能元件時,同功能的其他元件均已載入,使用感覺更流暢。而功能單一且使用頻率很低的元件就可以單獨打包成乙個,不需要時就不用載入。

vue router 路由懶載入

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

vue router路由懶載入

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

vue router 路由懶載入

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