vue2組件實(shí)現(xiàn)懶加載淺析
一、 什么是懶加載
懶加載也叫延遲加載，即在需要的時(shí)候進(jìn)行加載，隨用隨載。
二、為什么需要懶加載
在單頁(yè)應(yīng)用中，如果沒(méi)有應(yīng)用懶加載，運(yùn)用webpack打包后的文件將會(huì)異常的大，造成進(jìn)入首頁(yè)時(shí)，需要加載的內(nèi)容過(guò)多，延時(shí)過(guò)長(zhǎng)，不利于用戶(hù)體驗(yàn)，而運(yùn)用懶加載則可以將頁(yè)面進(jìn)行劃分，需要的時(shí)候加載頁(yè)面，可以有效的分擔(dān)首頁(yè)所承擔(dān)的加載壓力，減少首頁(yè)加載用時(shí)
三、如何與webpack配合實(shí)現(xiàn)組件懶加載
1、在webpack配置文件中的output路徑配置chunkFilename屬性
output: {
path: resolve(__dirname, 'dist'),
filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
chunkFilename: 'chunk[id].js?[chunkhash]',
publicPath: options.dev ? '/assets/' : publicPath
},
chunkFilename路徑將會(huì)作為組件懶加載的路徑
2、配合webpack支持的異步加載方法
- resolve => require([URL], resolve), 支持性好
- () => system.import(URL) , webpack2官網(wǎng)上已經(jīng)聲明將逐漸廢除, 不推薦使用
- () => import(URL), webpack2官網(wǎng)推薦使用, 屬于es7范疇, 需要配合babel的syntax-dynamic-import插件使用, 具體使用方法如下
npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015
use: [{
loader: 'babel-loader',
options: {
presets: [['es2015', {modules: false}]],
plugins: ['syntax-dynamic-import']
}
}]
四、具體實(shí)例中實(shí)現(xiàn)懶加載
1、路由中配置異步組件
export default new Router({
routes: [
{
mode: 'history',
path: '/my',
name: 'my',
component: resolve => require(['../page/my/my.vue'], resolve),//懶加載
},
]
})
2、實(shí)例中配置異步組件
components: {
historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懶加載
//historyTab: () => import('../../component/historyTab/historyTab.vue')
},
3、全局注冊(cè)異步組件
Vue.component('mideaHeader', () => {
System.import('./component/header/header.vue')
})
五、配置異步組件實(shí)現(xiàn)懶加載的問(wèn)題分析
1、多次進(jìn)出同一個(gè)異步加載頁(yè)面是否會(huì)造成多次加載組件？
答：否，首次需要用到組件時(shí)瀏覽器會(huì)發(fā)送請(qǐng)求加載組件，加載完將會(huì)緩存起來(lái)，以供之后再次用到該組件時(shí)調(diào)用
2、在多個(gè)地方使用同一個(gè)異步組件時(shí)是否造成多次加載組件？如：
//a頁(yè)面
export default {
components: {
historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懶加載
},
}
//b頁(yè)面
export default {
components: {
historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懶加載
},
}
答：否，理由同上
3、如果在兩個(gè)異步加載的頁(yè)面中分別同步與異步加載同一個(gè)組件時(shí)是否會(huì)造成資源重用？ 如：
//a頁(yè)面
import historyTab from '../../component/historyTab/historyTab.vue';
export default {
components: {
historyTab
},
}
//b頁(yè)面
export default {
components: {
historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懶加載
},
}
答: 會(huì), 將會(huì)造成資源重用, 根據(jù)打包后輸出的結(jié)果來(lái)看, a頁(yè)面中會(huì)嵌入historyTab組件的代碼, b頁(yè)面中的historyTab組件還是采用異步加載的方式, 另外打包c(diǎn)hunk；
解決方案： 組件開(kāi)發(fā)時(shí)， 如果根頁(yè)面沒(méi)有導(dǎo)入組件的情況下，而是在其他異步加載頁(yè)面中同時(shí)用到組件， 那么為實(shí)現(xiàn)資源的最大利用，在協(xié)同開(kāi)發(fā)的時(shí)候全部人都使用異步加載組件
4、在異步加載頁(yè)面中載嵌入異步加載的組件時(shí)對(duì)頁(yè)面是否會(huì)有渲染延時(shí)影響？
答：會(huì)， 異步加載的組件將會(huì)比頁(yè)面中其他元素滯后出現(xiàn)， 頁(yè)面會(huì)有瞬間閃跳影響；
解決方案：因?yàn)樵谑状渭虞d組件的時(shí)候會(huì)有加載時(shí)間， 出現(xiàn)頁(yè)面滯后， 所以需要合理的進(jìn)行頁(yè)面結(jié)構(gòu)設(shè)計(jì)， 避免首次出現(xiàn)跳閃現(xiàn)象；
六、懶加載的最終實(shí)現(xiàn)方案
1、路由頁(yè)面以及路由頁(yè)面中的組件全都使用懶加載
優(yōu)點(diǎn)：（1）最大化的實(shí)現(xiàn)隨用隨載
?。?）團(tuán)隊(duì)開(kāi)發(fā)不會(huì)因?yàn)闇贤▎?wèn)題造成資源的重復(fù)浪費(fèi)
缺點(diǎn)：（1）當(dāng)一個(gè)頁(yè)面中嵌套多個(gè)組件時(shí)將發(fā)送多次的http請(qǐng)求，可能會(huì)造成網(wǎng)頁(yè)顯示過(guò)慢且渲染參差不齊的問(wèn)題
2、路由頁(yè)面使用懶加載， 而路由頁(yè)面中的組件按需進(jìn)行懶加載, 即如果組件不大且使用不太頻繁, 直接在路由頁(yè)面中導(dǎo)入組件, 如果組件使用較為頻繁使用懶加載
優(yōu)點(diǎn)：（1）能夠減少頁(yè)面中的http請(qǐng)求，頁(yè)面顯示效果好
缺點(diǎn)：（2）需要團(tuán)隊(duì)事先交流， 在框架中分別建立懶加載組件與非懶加載組件文件夾
3、路由頁(yè)面使用懶加載，在不特別影響首頁(yè)顯示延遲的情況下，根頁(yè)面合理導(dǎo)入復(fù)用組件，再結(jié)合方案2
優(yōu)點(diǎn)：（1）合理解決首頁(yè)延遲顯示問(wèn)題
?。?）能夠最大化的減少http請(qǐng)求， 且做其他他路由界面的顯示效果最佳
缺點(diǎn)：（1）還是需要團(tuán)隊(duì)交流，建立合理區(qū)分各種加載方式的組件文件夾
七、采用第三種方案進(jìn)行目錄結(jié)構(gòu)設(shè)計(jì)
八、具體代碼實(shí)現(xiàn)設(shè)計(jì)
1、路由設(shè)計(jì)：
import Router from 'vue-router';
import Vue from 'vue';
Vue.use(Router);
export default new Router({
routes: [
{
mode: 'history',
path: '/home',
name: 'home',
component: resolve => require([URL], resolve),//懶加載
children: [
{
mode: 'history',
path: '/home/:name',
name: 'any',
component: resolve => require(['../page/any/any.vue'], resolve),//懶加載
},
]
},
{
mode: 'history',
path: '/store',
name: 'store',
component: resolve => require(['../page/store/store.vue'], resolve),//懶加載,
children: [
{
mode: 'history',
path: '/store/:name',
name: 'any',
component: resolve => require(['../page/any/any.vue'], resolve),//懶加載
},
]
},
{
mode: 'history',
path: '/my',
name: 'my',
component: resolve => require(['../page/my/my.vue'], resolve),//懶加載,
children: [
{
mode: 'history',
path: '/my/:name',
name: 'any',
component: resolve => require(['../page/any/any.vue'], resolve),//懶加載
},
]
},
]
})
（1）首層的路由根組件分別對(duì)應(yīng)的tab頁(yè)面
（2）根目錄后跟著各個(gè)子路由頁(yè)面，子路由采用動(dòng)態(tài)路由配合路由的編程式導(dǎo)航再加上vuex，最優(yōu)化提高開(kāi)發(fā)效率
直接貼上代碼：
/**
* Created by ZHANZF on 2017-3-20.
*/
//vuex配置
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
//路由組件存儲(chǔ)器
routers: {}
},
getters: {
routers: state => {
return state.data;
}
},
mutations: {
//動(dòng)態(tài)增加路由
addRouter: (state, data) => {
state.routers = Object.assign({}, state.routers, {
[data.name]: data.component
});
}
},
actions: {
acMethods({commit}) {
}
},
})
//根目錄中注冊(cè)路由組件
window.midea = {
registerRouter(name, component) {
Store.commit('addRouter', {
name: name,
component: component
})
}
};//頁(yè)面使用路由導(dǎo)航
openAnyPage() {
midea.registerRouter('module', resolve => {require(['../module/module.vue'], resolve)});//懶加載
this.$router.push({path: '/home/module', query: {title: this.title}});
}
//頁(yè)面中使用動(dòng)態(tài)組件
<template>
<component :is="currentRouter" :moduleName="title">
</component>
</template>
<script src="./any.js">
export default {
data () {
return {
routeName: '',
currentRouter: '',
title: '',
}
},
created() {
this.routeName = this.$route.params.name;
this.title = this.$route.query.title;
this.currentRouter = this.$store.state.routers[this.routeName];
},
methods: {
}
}
</script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3 setup語(yǔ)法糖銷(xiāo)毀一個(gè)或多個(gè)定時(shí)器(setTimeout/setInterval)
這篇文章主要給大家介紹了關(guān)于Vue3 setup語(yǔ)法糖銷(xiāo)毀一個(gè)或多個(gè)定時(shí)器(setTimeout/setInterval)的相關(guān)資料,vue是單頁(yè)面應(yīng)用,路由切換后,定時(shí)器并不會(huì)自動(dòng)關(guān)閉,需要手動(dòng)清除,當(dāng)頁(yè)面被銷(xiāo)毀時(shí),清除定時(shí)器即可,需要的朋友可以參考下2023-10-10
下面小編就為大家分享一篇vue2.0 子組件改變props值,并向父組件傳值的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue組件通信$attrs、$listeners實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue組件通信$attrs、$listeners實(shí)現(xiàn)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
Vue?elementUI表單嵌套表格并對(duì)每行進(jìn)行校驗(yàn)詳解
element-ui中有詳細(xì)的各種表格及表格方法,下面這篇文章主要給大家介紹了關(guān)于Vue?elementUI表單嵌套表格并對(duì)每行進(jìn)行校驗(yàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
vue.js編譯時(shí)給生成的文件增加版本號(hào)
這篇文章主要介紹了vue.js編譯時(shí)給生成的文件增加版本號(hào)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
uniapp寬屏開(kāi)發(fā)PC端方案及衍生問(wèn)題解決辦法
在uniapp中進(jìn)行寬屏開(kāi)發(fā),主要是指在電腦端(PC端)使用寬屏顯示效果進(jìn)行應(yīng)用的開(kāi)發(fā),這篇文章主要給大家介紹了關(guān)于uniapp寬屏開(kāi)發(fā)PC端方案及衍生問(wèn)題解決辦法,需要的朋友可以參考下2024-03-03
Vue中保存數(shù)據(jù)到磁盤(pán)文件的方法
今天小編就為大家分享一篇Vue中保存數(shù)據(jù)到磁盤(pán)文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue自定義全局組件實(shí)現(xiàn)彈框案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue Transition實(shí)現(xiàn)類(lèi)原生組件跳轉(zhuǎn)過(guò)渡動(dòng)畫(huà)的示例
本篇文章主要介紹了Vue Transition實(shí)現(xiàn)類(lèi)原生組件跳轉(zhuǎn)過(guò)渡動(dòng)畫(huà)的示例，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
Vue?keep-alive的實(shí)現(xiàn)原理分析
這篇文章主要介紹了Vue?keep-alive的實(shí)現(xiàn)原理分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04