vue router 路由懶載入

2022-03-06 10:37:52 字數 948 閱讀 7728

懶載入模式

大專案中,為了提高初始化頁面的效率,路由一般使用懶載入模式,一共三種實現方式。

(1)第一種寫法:

component: (resolve) => require(['@/components/one'], resolve)

(2)第二種寫法:

component: () => import('@/components/two')

這樣:

const index = () => import(/* webpackchunkname: "group-home" */ '@/views/index')

const routers = [

]//ps:

group-home』 是把元件按組分塊打包, 可以將多個元件放入這個組中

/* webpackchunkname: "group-home" */ 是打包後檔名稱,後面是檔案路徑。

//在build目錄下找到webpack.prod.conf.js檔案,將output修改為

output:

(3)第三種寫法:

components: r => require.ensure(, () => r(require('@/components/three')), 'group-home')

栗子:或者這樣

const index = r => require.ensure(, () => r(require('./views/index')), 'group-home');

const routers = [

]ps:

路由正常模式:

//

1、先引入頁面元件import home from '@/components/home'// 2、使用元件

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...