1. 程式人生 > >vue-router懶載入解決首次載入時資源過多導致的速度緩慢問題

vue-router懶載入解決首次載入時資源過多導致的速度緩慢問題

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

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

//採用了懶載入
export
default new Router({ routes: [ { path:'/', component:resolve => require(['@/components/index'],resolve) } ] })

非懶載入的方式:

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
Vue.use(Router)

export default new Router({
  routes: [
    {
        path:'/'
, component:index } ] })