Vue首頁界面加載優(yōu)化實(shí)現(xiàn)方法詳解
1、路由懶加載
問題: 項(xiàng)目在打包時(shí)會將首頁與其他頁面的資源打包到同一個(gè)資源文件,造成首頁加載的資源文件過大。
解決方法: 路由懶加載:打包時(shí)會將每個(gè)路由頁面拆分成單獨(dú)的 js 資源,同時(shí)跳轉(zhuǎn)到對應(yīng)頁面才會加載對應(yīng)路由的 js 資源。
{ path: "/about", name: "about", component: () => import(/* webpackChunkName: "about" */ "../views/AboutView.vue"), },
2、js 資源異步加載
問題: 在開發(fā)項(xiàng)目的時(shí)候,可能會在入口文件加載很多的第三方 js 資源。類似下面這種:
解決方法: 為處理這種入口文件多余的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異步載入。
在需要使用的頁面異步引入,就不用在入口文件加載了:
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) } }) } // 頁面調(diào)用 let url = 'http://xxx.js' loadjs(url) .then(() => { // 加載成功后的處理 }) .catch((e) => { // 加載錯(cuò)誤 })
3、圖片懶加載
問題: 首頁在加載時(shí),加載了還沒有進(jìn)入視野的圖片資源。
解決方法: 圖片懶加載原理都差不多,這里使用一個(gè)叫VueLazyComponent
組件,方便與后面的組件分包懶加載一起使用。其內(nèi)部實(shí)現(xiàn)就是一個(gè)帶插槽的公共組件,進(jìn)入視野后再加載資源,有興趣的可以自行去看源碼。傳送門
使用方式很簡單,這樣等圖片進(jì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、組件分包懶加載-在視口才加載
問題: 有時(shí)候首頁可能包含很多的組件,導(dǎo)致打包后的頁面資源過大。
解決方法: 可以考慮對組件分包,然后懶加載。
1)組件分包
其實(shí)與路由懶加載類似,就是異步引入組件,這一步操作后,每個(gè)異步引入的組件會被打包成單獨(dú)的資源文件。
export default { name: "HomeView", components: { TestCom: () => import(/* webpackChunkName: "TestCom" */ `@/components/TestCom.vue`), }, };
2)組件被分包后,可以對其進(jìn)行懶加載。
首頁組件太多,我們希望是頁面底部等一些不在視野內(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ōu)化實(shí)現(xiàn)方法詳解的文章就介紹到這了,更多相關(guān)Vue加載優(yōu)化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+element實(shí)現(xiàn)頁面頂部tag思路詳解
這篇文章主要介紹了vue+element實(shí)現(xiàn)頁面頂部tag效果,頁面顯示由數(shù)組循環(huán)得出,數(shù)組可存儲在store里,tags數(shù)組里面已經(jīng)有值,由于默認(rèn)是白色,所以頁面上看不出,接下來就是給選中的標(biāo)簽高亮,需要的朋友可以參考下2021-12-12Vue+Vite項(xiàng)目初建(axios+Unocss+iconify)的實(shí)現(xiàn)
一個(gè)好的項(xiàng)目開始搭建總是需要配置許多初始化配置,本文就來介紹一下Vue+Vite項(xiàng)目初建(axios+Unocss+iconify)的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02vue electron應(yīng)用調(diào)exe程序的實(shí)現(xiàn)步驟
這篇文章主要介紹了vue electron應(yīng)用調(diào)exe程序的實(shí)現(xiàn)步驟,用Python寫了一個(gè)本地服務(wù)編譯成exe程序,在electron程序啟動后,自動執(zhí)行exe程序,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-02-02JavaScript之實(shí)現(xiàn)一個(gè)簡單的Vue示例
這篇文章主要介紹了JavaScript之實(shí)現(xiàn)一個(gè)簡單的Vue示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01