vue-router路由懶加載及實(shí)現(xiàn)方式
vue-router路由懶加載及實(shí)現(xiàn)方式。
前言
什么是路由懶加載？--延遲加載，在需要的時候才會進(jìn)行加載。
一、路由懶加載
我們在路由中通常會定義很多不同的頁面。如果不應(yīng)用懶加載的話，很多頁面都會打包到同一個js文件中，文件將會異常的大。造成進(jìn)入首頁時，需要加載的內(nèi)容過多，時間過長，在瀏覽器中可能會出現(xiàn)短暫的空白頁，從而降低用戶體驗(yàn)，而運(yùn)用路由懶加載是將各個模塊分開打包，用戶查看的時候再加載對應(yīng)的模塊，減少加載用時。
也就是說：一開始進(jìn)入頁面時不需要一次性把資源都加載完，需要時在加載對應(yīng)的資源。
二、實(shí)現(xiàn)路由懶加載
路由懶加載的主要作用是將 路由對應(yīng)的組件打包成一個個的js代碼塊。只有在這個路由被訪問到的時候，才會加載對應(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)懶加載，但是這種情況是一個組件會生成一個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('組件路徑')
//下面沒有指定webpackChunkName,每個組件打包成一個js文件
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
指定相同的webpackChunkName，會合并打包成一個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值相同的會打包成一個js文件
3.webpack提供的require.ensure()實(shí)現(xiàn)懶加載
vue-router 配置路由，使用webpack的require.ensure技術(shù)，可以實(shí)現(xiàn)懶加載，這種情況下，多個路由指定相同的chunkName，會合并打包成一個js文件。
require.ensure可實(shí)現(xiàn)按需加載資源，包括js，css等，會給里面require的文件單獨(dú)打包，不會合主文件打包在一起。
{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')
第一個參數(shù)是數(shù)組，表明第二個參數(shù)里需要依賴的模塊，這些會提前加載。
第二個是回調(diào)函數(shù),在這個回調(diào)函數(shù)里面require的文件會被單獨(dú)打包成一個chunk,不會和主文件打包在一起，這樣就生成了兩個chunk,第一次加載時只加載主文件。
第三個參數(shù)是錯誤回調(diào)。
第四個參數(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解使用jest對vue項目進(jìn)行單元測試，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue中使用crypto-js AES對稱加密算法實(shí)現(xiàn)加密解密
?在數(shù)字加密算法中，通過可劃分為對稱加密和非對稱加密，本文主要介紹了Vue中使用crypto-js AES對稱加密算法實(shí)現(xiàn)加密解密，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Element-Plus Select組件實(shí)現(xiàn)滾動分頁加載功能
Element-Plus的select組件并沒有自帶滾動分頁加載的功能,其雖然提供了自定義下拉菜單的底部的方式可以自定義上一頁及下一頁操作按鈕的方式進(jìn)行分頁加載切換,這篇文章主要介紹了Element-Plus Select組件實(shí)現(xiàn)滾動分頁加載功能,需要的朋友可以參考下2024-03-03
vue + el-form 實(shí)現(xiàn)的多層循環(huán)表單驗(yàn)證
這篇文章主要介紹了vue + el-form 實(shí)現(xiàn)的多層循環(huán)表單驗(yàn)證，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下。2020-11-11
elementui中tabel組件的scope.$index的使用及說明
這篇文章主要介紹了elementui中tabel組件的scope.$index的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
VUE?項目如何使用?Docker+Nginx進(jìn)行打包部署
使用?Docker,你可以創(chuàng)建一個包含?Vue.js?應(yīng)用程序的容器鏡像,并在任何支持?Docker?的環(huán)境中運(yùn)行該鏡像,這篇文章主要介紹了VUE?項目用?Docker+Nginx進(jìn)行打包部署,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了如何把vuejs打包出來的文件整合到springboot里,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
vue3報錯提示找不到模塊“./XXX.vue”或其相應(yīng)的類型聲明問題
這篇文章主要介紹了vue3報錯提示找不到模塊“./XXX.vue”或其相應(yīng)的類型聲明問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
一篇文章，教你學(xué)會Vue CLI 插件開發(fā)
這篇文章主要介紹了Vue CLI插件開發(fā)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Hook Event 是 Vue 的自定義事件結(jié)合生命周期鉤子實(shí)現(xiàn)的一種從組件外部為組件注入額外生命周期方法的功能，本文重點(diǎn)給大家介紹Vue Hook Event 解讀，感興趣的朋友一起看看吧2023-01-01