Vue首頁界面加載優(yōu)化實現(xiàn)方法詳解
1、路由懶加載
問題： 項目在打包時會將首頁與其他頁面的資源打包到同一個資源文件，造成首頁加載的資源文件過大。
解決方法： 路由懶加載：打包時會將每個路由頁面拆分成單獨的 js 資源，同時跳轉(zhuǎn)到對應(yīng)頁面才會加載對應(yīng)路由的 js 資源。
{
path: "/about",
name: "about",
component: () =>
import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
},
2、js 資源異步加載
問題： 在開發(fā)項目的時候，可能會在入口文件加載很多的第三方 js 資源。類似下面這種：
解決方法： 為處理這種入口文件多余的js，下面介紹三種方式。
1）支持異步加載的可以將js資源設(shè)置為異步加載。
async：異步加載js，js加載完后立即執(zhí)行，多個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異步載入。
在需要使用的頁面異步引入，就不用在入口文件加載了：
import("xxx.js").then((module) => {
console.log(module);
});
3）其他規(guī)范的js可以采用異步添加script標簽的方式載入。
// 異步加載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)
}
})
}
// 頁面調(diào)用
let url = 'http://xxx.js'
loadjs(url)
.then(() => {
// 加載成功后的處理
})
.catch((e) => {
// 加載錯誤
})
3、圖片懶加載
問題： 首頁在加載時，加載了還沒有進入視野的圖片資源。
解決方法： 圖片懶加載原理都差不多，這里使用一個叫VueLazyComponent組件，方便與后面的組件分包懶加載一起使用。其內(nèi)部實現(xiàn)就是一個帶插槽的公共組件，進入視野后再加載資源，有興趣的可以自行去看源碼。傳送門
使用方式很簡單，這樣等圖片進入視野后才會加載圖片資源：
// main.js import VueLazyComponent from "@xunlei/vue-lazy-component"; Vue.use(VueLazyComponent);
// 業(yè)務(wù)頁面內(nèi)
<vue-lazy-component>
<img src="../assets/test.png" alt="" />
</vue-lazy-component>
4、組件分包懶加載-在視口才加載
問題： 有時候首頁可能包含很多的組件，導(dǎo)致打包后的頁面資源過大。
解決方法： 可以考慮對組件分包，然后懶加載。
1）組件分包
其實與路由懶加載類似，就是異步引入組件，這一步操作后，每個異步引入的組件會被打包成單獨的資源文件。
export default {
name: "HomeView",
components: {
TestCom: () =>
import(/* webpackChunkName: "TestCom" */ `@/components/TestCom.vue`),
},
};
2）組件被分包后，可以對其進行懶加載。
首頁組件太多，我們希望是頁面底部等一些不在視野內(nèi)的組件資源，進入視野后再加載。實現(xiàn)原理同上面的圖片懶加載。
<vue-lazy-component>
<template scope="scope">
<TestCom v-if="scope.loading"></TestCom>
</template>
</vue-lazy-component>
到此這篇關(guān)于Vue首頁界面加載優(yōu)化實現(xiàn)方法詳解的文章就介紹到這了,更多相關(guān)Vue加載優(yōu)化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
公司業(yè)務(wù)新開了一個商家管理微信H5移動端項目，日歷控件是商家管理員查看通過日程來篩選獲取某日用戶的訂單等數(shù)據(jù)。下面小編給大家?guī)砹嘶趘ue實現(xiàn)一個炫酷的日歷組件，感興趣的朋友參考下吧2018-10-10
vue+element實現(xiàn)頁面頂部tag思路詳解
這篇文章主要介紹了vue+element實現(xiàn)頁面頂部tag效果,頁面顯示由數(shù)組循環(huán)得出，數(shù)組可存儲在store里，tags數(shù)組里面已經(jīng)有值，由于默認是白色，所以頁面上看不出，接下來就是給選中的標簽高亮，需要的朋友可以參考下2021-12-12
這篇文章主要介紹了vue控制多行文字展開收起的實現(xiàn)示例（也叫控制文字展開隱藏），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
Vue+Vite項目初建(axios+Unocss+iconify)的實現(xiàn)
一個好的項目開始搭建總是需要配置許多初始化配置,本文就來介紹一下Vue+Vite項目初建(axios+Unocss+iconify)的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-02-02
這篇文章主要介紹了vue中的v-if和v-show的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了vue中使用js-doc的相關(guān)知識，本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2024-01-01
近期在做ve3的項目時因為功能需要,需要獲取當前路由的地址,下面這篇文章主要給大家介紹了關(guān)于vue3獲取當前路由地址的兩種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
vue electron應(yīng)用調(diào)exe程序的實現(xiàn)步驟
這篇文章主要介紹了vue electron應(yīng)用調(diào)exe程序的實現(xiàn)步驟,用Python寫了一個本地服務(wù)編譯成exe程序,在electron程序啟動后,自動執(zhí)行exe程序,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了JavaScript之實現(xiàn)一個簡單的Vue示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了Vue.2.0.5過渡效果使用技巧，實例分析了Vue.2.0.5過渡效果的技巧，非常具有實用價值，需要的朋友可以參考下。2017-03-03