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)，不利于用戶體驗(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)隨用隨載
（2）團(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)文章
vue動(dòng)畫(huà)—通過(guò)鉤子函數(shù)實(shí)現(xiàn)半場(chǎng)動(dòng)畫(huà)操作
這篇文章主要介紹了vue動(dòng)畫(huà)—通過(guò)鉤子函數(shù)實(shí)現(xiàn)半場(chǎng)動(dòng)畫(huà)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue-router之nuxt動(dòng)態(tài)路由設(shè)置的兩種方法小結(jié)
今天小編就為大家分享一篇vue-router之nuxt動(dòng)態(tài)路由設(shè)置的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue2 v-model/v-text 中使用過(guò)濾器的方法示例
這篇文章主要介紹了vue2 v-model/v-text 中使用過(guò)濾器的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
vue項(xiàng)目如何通過(guò)url鏈接引入其他系統(tǒng)頁(yè)面
這篇文章主要介紹了vue項(xiàng)目如何通過(guò)url鏈接引入其他系統(tǒng)頁(yè)面問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue Axios異步與數(shù)據(jù)類型轉(zhuǎn)換問(wèn)題淺析
總的來(lái)說(shuō)這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過(guò)程。希望通過(guò)這道題能給你帶來(lái)一種解題優(yōu)化的思路，Axios是一個(gè)開(kāi)源的可以用在瀏覽器端和Node JS的異步通信框架，主要作用就是實(shí)現(xiàn)AJAX異步通信2023-01-01
Vant picker 多級(jí)聯(lián)動(dòng)操作
這篇文章主要介紹了Vant picker 多級(jí)聯(lián)動(dòng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue生命周期activated之返回上一頁(yè)不重新請(qǐng)求數(shù)據(jù)操作
這篇文章主要介紹了Vue生命周期activated之返回上一頁(yè)不重新請(qǐng)求數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
單元測(cè)試是軟件開(kāi)發(fā)非常基礎(chǔ)的一部分。單元測(cè)試會(huì)封閉執(zhí)行最小化單元的代碼，使得添加新功能和追蹤問(wèn)題更容易。Vue 的單文件組件使得為組件撰寫(xiě)隔離的單元測(cè)試這件事更加直接。它會(huì)讓你更有信心地開(kāi)發(fā)新特性而不破壞現(xiàn)有的實(shí)現(xiàn)，并幫助其他開(kāi)發(fā)者理解你的組件的作用。2021-06-06
在vue3.x中vuex調(diào)取值在html代碼里可以直接使用vue2.x的方法,但是在js里與vue2.x就有了那么一丟丟的不同,下面這篇文章主要給大家介紹了關(guān)于Vue3中Vuex詳細(xì)使用的相關(guān)資料,需要的朋友可以參考下2022-07-07
vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無(wú)效的解決
這篇文章主要介紹了vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無(wú)效的解決方案，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01