vue-router路由懶加載及實現方式
vue-router路由懶加載及實現方式。
前言
什么是路由懶加載？--延遲加載，在需要的時候才會進行加載。
一、路由懶加載
我們在路由中通常會定義很多不同的頁面。如果不應用懶加載的話，很多頁面都會打包到同一個js文件中，文件將會異常的大。造成進入首頁時，需要加載的內容過多，時間過長，在瀏覽器中可能會出現短暫的空白頁，從而降低用戶體驗，而運用路由懶加載是將各個模塊分開打包，用戶查看的時候再加載對應的模塊，減少加載用時。
也就是說：一開始進入頁面時不需要一次性把資源都加載完，需要時在加載對應的資源。
二、實現路由懶加載
路由懶加載的主要作用是將 路由對應的組件打包成一個個的js代碼塊。只有在這個路由被訪問到的時候，才會加載對應組件的代碼塊。
//非路由懶加載
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實現路由懶加載的三種方式：
- Vue異步組件
- ES6的import()
- webpack的require.ensure()
1.Vue異步組件(異步加載)
vue-router 配置路由，使用vue的異步組件技術，可以實現懶加載，但是這種情況是一個組件會生成一個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()實現懶加載
vue-router 配置路由，使用webpack的require.ensure技術，可以實現懶加載，這種情況下，多個路由指定相同的chunkName，會合并打包成一個js文件。
require.ensure可實現按需加載資源，包括js，css等，會給里面require的文件單獨打包，不會合主文件打包在一起。
{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')
第一個參數是數組，表明第二個參數里需要依賴的模塊，這些會提前加載。
第二個是回調函數,在這個回調函數里面require的文件會被單獨打包成一個chunk,不會和主文件打包在一起，這樣就生成了兩個chunk,第一次加載時只加載主文件。
第三個參數是錯誤回調。
第四個參數是單獨打包的chunk的文件名
const Coo = resolve=>{
require.ensure([],()=>{resolve(require('@/components/List'))})
}
...
{path:'/list',name:'List',component:Coo}
到此這篇關于vue-router路由懶加載及實現方式的文章就介紹到這了,更多相關vue-router路由懶加載內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue基于兩個計算屬性實現選中和全選功能,結合實例形式分析了vue計算屬性get及set操作頁面元素實現選中與全選功能相關操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了10分鐘教你快速上手Vue3中新增的API,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
本篇文章主要介紹了詳解Vue 全局引入bass.scss 處理方案，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問題
這篇文章主要介紹了vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue實現點擊箭頭上下移動效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了詳解vue-loader在項目中是如何配置的，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了實現vue圖片縮放方式-拖拽組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue使用原生js創(chuàng)建元素樣式不生效問題及解決
這篇文章主要介紹了vue使用原生js創(chuàng)建元素樣式不生效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue在頁面中如何使用window全局變量問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
本文主要介紹了springboot和vue前后端交互的實現示例,將包括一個簡單的Vue.js前端應用程序,用于發(fā)送GET請求到一個Spring Boot后端應用程序,以獲取并顯示用戶列表,感興趣的可以了解一下2024-05-05