vue路由懶加載

1.開發環境 vue
2.電腦系統 windows10專業版
3.爲何須要使用懶加載?

在開發的過程當中隨着項目的業務愈來愈多,需求愈來愈多,體積愈來愈來,像vue這種單頁面應用,若是沒有使用懶加載,運行打包以後的文件會很大,進入首頁時,須要加載內容不少,時間過長,可能會出現短暫白屏的狀況,即便作了loading也不利於用戶體驗,而運用懶加載能夠將頁面進行劃分,須要的時候再加載頁面。下面我來分享三種懶加載的使用方法。

4.方法一:vue異步組件技術(異步加載)

vue-royer配置路由,使用vue的異步組件技術,能夠實現按需加載,可是這種狀況下,一個組件生成一個js文件

{
    path: '/my',
    name: 'my',
    component: resolve => require(['../views/my.vue'], resolve)
  }

5.方法二:組件懶加載(使用import)

const 組件名=()=>import('組件路徑');

//沒有指定 webpackChunkName,每一個組件打包成一個js文件
const Home=()=>import('../views/home.vue')

//指定了相同的webpackChunkName,會合並打包成一個js文件

//按組件劃分
const Home=()=>import(/* webpackChunkName: "home" */ '../views/home.vue')

const About=()=>import(/* webpackChunkName: "home" */ '../views/home.vue')

const My=()=>import(/* webpackChunkName: "home" */ '../views/home.vue')

{ path: '/about', component: About }, { path: '/my', component: My }, { path: '/home', component: Home }

6.方法三:webpack提供的require.ensure()

vue-router配置路由,使用webpack的require.ensure技術,也能夠實現按需加載。這種狀況下,多個路由指定相同的chunkName,會合並打包成一個js文件

{ path: '/home', name: 'home', component: r => require.ensure([], () => r(require('../views/home.vue')), 'home') },

{ path: '/index', name: 'Index', component: r => require.ensure([], () => r(require('../views/index.vue')), 'home') },

{ path: '/about', name: 'about', component: r => require.ensure([], () => r(require('@/views/about.vue')), 'about') }

// r就是resolve
const list = r => require.ensure([], () => r(require('../views/list.vue')), 'list');

//這種是官方推薦的寫的 按模塊劃分懶加載

7.本期的分享到了這裏就結束啦,但願對你有所幫助,讓咱們一塊兒努力走向巔峯。