Vue首頁(yè)界面加載優(yōu)化實(shí)現(xiàn)方法詳解
1、路由懶加載
問(wèn)題： 項(xiàng)目在打包時(shí)會(huì)將首頁(yè)與其他頁(yè)面的資源打包到同一個(gè)資源文件，造成首頁(yè)加載的資源文件過(guò)大。
解決方法： 路由懶加載：打包時(shí)會(huì)將每個(gè)路由頁(yè)面拆分成單獨(dú)的 js 資源，同時(shí)跳轉(zhuǎn)到對(duì)應(yīng)頁(yè)面才會(huì)加載對(duì)應(yīng)路由的 js 資源。
{
path: "/about",
name: "about",
component: () =>
import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
},
2、js 資源異步加載
問(wèn)題： 在開(kāi)發(fā)項(xiàng)目的時(shí)候，可能會(huì)在入口文件加載很多的第三方 js 資源。類(lèi)似下面這種：
解決方法： 為處理這種入口文件多余的js，下面介紹三種方式。
1）支持異步加載的可以將js資源設(shè)置為異步加載。
async：異步加載js，js加載完后立即執(zhí)行，多個(gè)js執(zhí)行順序不固定。
defer：異步加載js，解析 document后，按js文件順序以此執(zhí)行。
<script type="text/javascript" src="./js/testPage.js" async></script> //或 <script type="text/javascript" src="./js/testPage.js" defer></script>
2）符合ES Module 規(guī)范的資源，可以采用import異步載入。
在需要使用的頁(yè)面異步引入，就不用在入口文件加載了：
import("xxx.js").then((module) => {
console.log(module);
});
3）其他規(guī)范的js可以采用異步添加script標(biāo)簽的方式載入。
// 異步加載js文件
function loadjs(url) {
return new Promise((resolve, reject) => {
let secScript = document.createElement('script')
secScript.setAttribute('type', 'text/javascript')
secScript.setAttribute('src', url)
let loaded = false
document.body.insertBefore(secScript, document.body.lastChild)
try {
secScript.onload = secScript.onreadystatechange = () => {
if (
!loaded &&
(!secScript.readyState ||
/loaded|complete/.test(secScript.readyState))
) {
loaded = true
resolve()
}
}
} catch (error) {
reject(error)
}
})
}
// 頁(yè)面調(diào)用
let url = 'http://xxx.js'
loadjs(url)
.then(() => {
// 加載成功后的處理
})
.catch((e) => {
// 加載錯(cuò)誤
})
3、圖片懶加載
問(wèn)題： 首頁(yè)在加載時(shí)，加載了還沒(méi)有進(jìn)入視野的圖片資源。
解決方法： 圖片懶加載原理都差不多，這里使用一個(gè)叫VueLazyComponent組件，方便與后面的組件分包懶加載一起使用。其內(nèi)部實(shí)現(xiàn)就是一個(gè)帶插槽的公共組件，進(jìn)入視野后再加載資源，有興趣的可以自行去看源碼。傳送門(mén)
使用方式很簡(jiǎn)單，這樣等圖片進(jìn)入視野后才會(huì)加載圖片資源：
// main.js import VueLazyComponent from "@xunlei/vue-lazy-component"; Vue.use(VueLazyComponent);
// 業(yè)務(wù)頁(yè)面內(nèi)
<vue-lazy-component>
<img src="../assets/test.png" alt="" />
</vue-lazy-component>
4、組件分包懶加載-在視口才加載
問(wèn)題： 有時(shí)候首頁(yè)可能包含很多的組件，導(dǎo)致打包后的頁(yè)面資源過(guò)大。
解決方法： 可以考慮對(duì)組件分包，然后懶加載。
1）組件分包
其實(shí)與路由懶加載類(lèi)似，就是異步引入組件，這一步操作后，每個(gè)異步引入的組件會(huì)被打包成單獨(dú)的資源文件。
export default {
name: "HomeView",
components: {
TestCom: () =>
import(/* webpackChunkName: "TestCom" */ `@/components/TestCom.vue`),
},
};
2）組件被分包后，可以對(duì)其進(jìn)行懶加載。
首頁(yè)組件太多，我們希望是頁(yè)面底部等一些不在視野內(nèi)的組件資源，進(jìn)入視野后再加載。實(shí)現(xiàn)原理同上面的圖片懶加載。
<vue-lazy-component>
<template scope="scope">
<TestCom v-if="scope.loading"></TestCom>
</template>
</vue-lazy-component>
到此這篇關(guān)于Vue首頁(yè)界面加載優(yōu)化實(shí)現(xiàn)方法詳解的文章就介紹到這了,更多相關(guān)Vue加載優(yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中從template到j(luò)sx語(yǔ)法教程示例
這篇文章主要為大家介紹了Vue中從template到j(luò)sx語(yǔ)法教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果
在vue項(xiàng)目中,我們通常會(huì)使用Axios來(lái)與后臺(tái)進(jìn)行數(shù)據(jù)交互,而當(dāng)我們發(fā)起請(qǐng)求時(shí),常常需要在頁(yè)面上顯示一個(gè)加載框（Loading）,然后等數(shù)據(jù)返回后自動(dòng)將其隱藏,本文介紹了基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果,需要的朋友可以參考下2024-03-03
vue動(dòng)畫(huà)打包后失效問(wèn)題的解決方法
這篇文章主要介紹了vue動(dòng)畫(huà)打包后失效問(wèn)題的解決方法,在文中給大家提到了vue-cli 打包后自定義動(dòng)畫(huà)未執(zhí)行的解決方法，需要的朋友可以參考下2018-09-09
vuex實(shí)現(xiàn)簡(jiǎn)易計(jì)數(shù)器
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)一個(gè)簡(jiǎn)易計(jì)數(shù)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
Vuex入門(mén)學(xué)習(xí)之Getter詳解
這篇文章主要介紹了Vuex入門(mén)學(xué)習(xí)之Getter詳解,Vuex 允許我們?cè)?nbsp;store 中定義 getter(可以認(rèn)為是 store 的計(jì)算屬性),就像計(jì)算屬性一樣,getter 的返回值會(huì)根據(jù)它的依賴(lài)被緩存起來(lái),且只有當(dāng)它的依賴(lài)值發(fā)生了改變才會(huì)被重新計(jì)算,需要的朋友可以參考下2023-11-11
這篇文章主要給大家介紹了關(guān)于vuex的數(shù)據(jù)渲染與修改的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要給大家介紹了關(guān)于vue3使用base64加密的兩種方法,我們?cè)趘ue項(xiàng)目中有時(shí)會(huì)使用到Base6464轉(zhuǎn)碼,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
在Vue3中,公共組件的main.js文件扮演著非常重要的角色,它的作用主要體現(xiàn)在：注冊(cè)全局組件、引入公共樣式、引入Vue、引入組件、創(chuàng)建Vue實(shí)例、掛載實(shí)例,本文將圍繞Vue3公共組件的main.js文件進(jìn)行詳細(xì)的闡述,包括其作用、常用代碼等方面2023-08-08
稍微學(xué)一下Vue的數(shù)據(jù)響應(yīng)式（Vue2及Vue3區(qū)別）
這篇文章主要介紹了稍微學(xué)一下 Vue 的數(shù)據(jù)響應(yīng)式（Vue2 及 Vue3），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
VUE項(xiàng)目中調(diào)用高德地圖的全流程講解
這篇文章主要介紹了VUE項(xiàng)目中調(diào)用高德地圖的全流程講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08