vue-router路由懶加載及實(shí)現(xiàn)方式。

前言

什么是路由懶加載？--延遲加載，在需要的時(shí)候才會(huì)進(jìn)行加載。

一、路由懶加載

         我們?cè)诼酚芍型ǔ?huì)定義很多不同的頁(yè)面。如果不應(yīng)用懶加載的話，很多頁(yè)面都會(huì)打包到同一個(gè)js文件中，文件將會(huì)異常的大。造成進(jìn)入首頁(yè)時(shí)，需要加載的內(nèi)容過(guò)多，時(shí)間過(guò)長(zhǎng)，在瀏覽器中可能會(huì)出現(xiàn)短暫的空白頁(yè)，從而降低用戶(hù)體驗(yàn)，而運(yùn)用路由懶加載是將各個(gè)模塊分開(kāi)打包，用戶(hù)查看的時(shí)候再加載對(duì)應(yīng)的模塊，減少加載用時(shí)。

也就是說(shuō)：一開(kāi)始進(jìn)入頁(yè)面時(shí)不需要一次性把資源都加載完，需要時(shí)在加載對(duì)應(yīng)的資源。 

二、實(shí)現(xiàn)路由懶加載

 路由懶加載的主要作用是將 路由對(duì)應(yīng)的組件打包成一個(gè)個(gè)的js代碼塊。只有在這個(gè)路由被訪問(wèn)到的時(shí)候，才會(huì)加載對(duì)應(yīng)組件的代碼塊。

//非路由懶加載
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'
import New from '@/components/New'
import List from '@/components/List'
 
......
 
routes:[
    {path:'/Login',name:'Login',component:Login},
    {path:'/',name:'Home',component:Home},
    ...
]

vue實(shí)現(xiàn)路由懶加載的三種方式： 

• Vue異步組件
• ES6的import()
• webpack的require.ensure() 

1.Vue異步組件(異步加載)

vue-router 配置路由，使用vue的異步組件技術(shù)，可以實(shí)現(xiàn)懶加載，但是這種情況是一個(gè)組件會(huì)生成一個(gè)js文件。

component:resolve => require(['需要加載的組件地址'],resolve) 

{path:'/login',name:'Login',
    component:resolve => require(['@/components/Login'],resolve)},
{path:'/home',name:'Home',
    component:resolve => require(['@/components/Home'],resolve),
    children:[
        {path:'/new',name:'New',
            component:resolve =>require(['@/components/New'],resolve)},
        {path:'/list',name:'List',
            component:resolve => require(['@/components/List'],resolve)}
    ]
 }

2.推薦方式-ES6的import()

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

//下面沒(méi)有指定webpackChunkName,每個(gè)組件打包成一個(gè)js文件
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')

 指定相同的webpackChunkName，會(huì)合并打包成一個(gè)js文件

const Foo = () => import(/*webpackChunkName:'ImportFuncDemo'*/,'../components/Foo');
const Aoo - () => import(/*webpackChunkName:'ImportFuncDemo'*/,'../components/Aoo')
...
{path:'/Foo',name:'Foo',component:Foo},
{path:'/Aoo',name:'Aoo',component:Aoo},
{path:'/Login',name:'Login',
    component: ()=>import(/*webpackChunkName:"ImportFuncDemo"*/,'../compontents/Login')}

 上面代碼中，webpackChunkName值相同的會(huì)打包成一個(gè)js文件

 3.webpack提供的require.ensure()實(shí)現(xiàn)懶加載

vue-router 配置路由，使用webpack的require.ensure技術(shù)，可以實(shí)現(xiàn)懶加載，這種情況下，多個(gè)路由指定相同的chunkName，會(huì)合并打包成一個(gè)js文件。

require.ensure可實(shí)現(xiàn)按需加載資源，包括js，css等，會(huì)給里面require的文件單獨(dú)打包，不會(huì)合主文件打包在一起。 

{path:'/home',name:'home',component:r=>
    require.ensure([],()=>r(require('@/components/home')),'funcDemo')},
{path:'/new',name:'new',component:r=>
    require.ensure([],()=>r(require('@/components/new')),'funcDemo')},
{path:'/list',name:'list',component:r=>
    require.ensure([],()=>r(require('@/components/list')),'listDemo')},

注：r就是resolve 

const list = r => require.ensure([],()=>r(require('組件地址')),'list') 

 第一個(gè)參數(shù)是數(shù)組，表明第二個(gè)參數(shù)里需要依賴(lài)的模塊，這些會(huì)提前加載。

第二個(gè)是回調(diào)函數(shù),在這個(gè)回調(diào)函數(shù)里面require的文件會(huì)被單獨(dú)打包成一個(gè)chunk,不會(huì)和主文件打包在一起，這樣就生成了兩個(gè)chunk,第一次加載時(shí)只加載主文件。

第三個(gè)參數(shù)是錯(cuò)誤回調(diào)。 

第四個(gè)參數(shù)是單獨(dú)打包的chunk的文件名 

const  Coo = resolve=>{
 require.ensure([],()=>{resolve(require('@/components/List'))})
}
 
...
{path:'/list',name:'List',component:Coo}

到此這篇關(guān)于vue-router路由懶加載及實(shí)現(xiàn)方式的文章就介紹到這了,更多相關(guān)vue-router路由懶加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論