減少 Vue 應(yīng)用白屏時間的經(jīng)驗總結(jié)
更新時間：2025年08月12日 09:15:26 作者：CAD老兵
Vue 項目日益龐大,首屏渲染變慢、頁面打開時出現(xiàn)“白屏”的現(xiàn)象屢見不鮮,本文將系統(tǒng)講解白屏的成因,并提供多種實用優(yōu)化策略與示例代碼,幫助你在實際項目中顯著提升用戶體驗
隨著前端應(yīng)用不斷發(fā)展，Vue 項目日益龐大，首屏渲染變慢、頁面打開時出現(xiàn)“白屏”的現(xiàn)象屢見不鮮。本文將系統(tǒng)講解白屏的成因，并提供多種 實用優(yōu)化策略與示例代碼，幫助你在實際項目中顯著提升用戶體驗。
什么是白屏時間？
白屏時間是指用戶從點擊鏈接或輸入地址到頁面開始有內(nèi)容顯示之間的這段時間。其根本原因通常包括：
- JS/CSS 資源體積大，下載與解析耗時
- 應(yīng)用初始化慢（Vue 掛載、hydrate）
- 網(wǎng)絡(luò)慢或資源未緩存
- 圖片、字體加載阻塞渲染
優(yōu)化白屏的目標是：盡快渲染首屏關(guān)鍵內(nèi)容，并讓用戶“感知”到頁面在加載。
優(yōu)化策略總覽
| 優(yōu)化策略 | 適用場景 | 難度 | 效果 |
|---|---|---|---|
| 預(yù)渲染 / SSR | 靜態(tài)官網(wǎng) / 內(nèi)容站 | ?? | ???????? |
| 路由懶加載 / 動態(tài)導(dǎo)入 | 多頁面應(yīng)用 | ? | ?????? |
| 骨架屏 / 占位內(nèi)容 | 產(chǎn)品頁 / 營銷頁 | ? | ?????? |
| 圖片懶加載 / 字體優(yōu)化 | 圖片多 / 字體多頁面 | ? | ???? |
| 延遲加載重型模塊 | 圖表、監(jiān)控、動畫 | ? | ?????? |
| 資源壓縮 / 緩存優(yōu)化 | 所有頁面 | ? | ???? |
| 內(nèi)聯(lián)關(guān)鍵 CSS / 預(yù)加載 | 內(nèi)容精簡、強調(diào)首屏性能的頁面 | ?? | ?????? |
一、使用預(yù)渲染（Prerender）或 SSR
原理說明：
- SSR 在服務(wù)器生成 HTML，可避免客戶端加載過久才有內(nèi)容。
- 對靜態(tài)頁面，使用構(gòu)建時 預(yù)渲染（Prerender）更高效。
?? 示例：使用vite-plugin-prerender-spa實現(xiàn)預(yù)渲染
npm install vite-plugin-prerender-spa --save-dev
\`\`\`
\`\`\`ts
// vite.config.ts
import prerender from 'vite-plugin-prerender-spa'
export default {
plugins: [
prerender({
staticDir: 'dist',
routes: ['/', '/about'] // 構(gòu)建時生成 HTML
})
]
}
二、代碼拆分 + 路由懶加載
原理說明：
- 初始加載越輕，白屏越短。
- Vue 支持
import()實現(xiàn) 組件按需加載，并與路由結(jié)合使用。
示例：
// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
const Home = () => import('@/views/Home.vue')
const About = () => import('@/views/About.vue')
export default createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
三、使用骨架屏代替白屏
原理說明：
骨架屏是應(yīng)用加載中展示的占位元素，可用來傳達“頁面正在加載”而不是白屏狀態(tài)。
示例：簡單骨架屏組件
<template>
<div v-if="loading" class="skeleton"></div>
<HomePage v-else />
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import HomePage from './views/Home.vue'
const loading = ref(true)
onMounted(() => setTimeout(() => (loading.value = false), 1500))
</script>
<style>
.skeleton {
height: 100vh;
background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
background-size: 200% 100%;
animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
</style>
四、圖片懶加載與字體優(yōu)化
原理說明：
- 圖片和字體資源體積大，可能阻塞頁面渲染。
- 圖片應(yīng)懶加載；字體應(yīng)設(shè)置
font-display: swap。
示例：
<!-- 懶加載圖片指令 -->
<img v-lazy="imgUrl" />
<script setup lang="ts">
import { onMounted } from 'vue'
const imgUrl = '/big-banner.jpg'
</script>
// main.ts
app.directive('lazy', {
mounted(el, binding) {
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
el.src = binding.value
observer.disconnect()
}
})
observer.observe(el)
}
})
@font-face {
font-family: 'MyFont';
src: url('/fonts/my-font.woff2') format('woff2');
font-display: swap;
}
五、延遲加載非關(guān)鍵模塊
原理說明：
不必首屏渲染的代碼（如 ECharts、監(jiān)控 SDK、動畫庫）應(yīng)延遲加載，避免阻塞。
示例：
onMounted(() => {
requestIdleCallback(() => {
import('echarts').then(echarts => {
const chart = echarts.init(document.getElementById('chart')!)
chart.setOption({ title: { text: '懶加載圖表' } })
})
})
})
六、使用內(nèi)聯(lián)關(guān)鍵 CSS
原理說明：
- 首屏渲染常依賴一些關(guān)鍵樣式（比如布局、導(dǎo)航欄）。
- 可通過 Vite 插件將其提取并 內(nèi)聯(lián) 到 HTML 中。
示例：
npm install vite-plugin-critical --save-dev
// vite.config.ts
import critical from 'vite-plugin-critical'
export default {
plugins: [
critical({
criticalUrl: '',
criticalBase: './dist/',
criticalPages: [{ uri: '', template: 'index' }]
})
]
}
七、開啟 Gzip/Brotli 壓縮
原理說明：
資源壓縮后體積顯著減少，瀏覽器解壓速度遠快于傳輸速度，提升加載性能。
示例：
npm install vite-plugin-compression --save-dev
// vite.config.ts
import compression from 'vite-plugin-compression'
export default {
plugins: [compression({ algorithm: 'gzip' })]
}
八、使用 preload 加快關(guān)鍵資源加載
原理說明：
使用 <link rel="preload"> 或 <link rel="modulepreload"> 告訴瀏覽器：這資源是關(guān)鍵路徑，先加載它！
示例：
<!-- index.html --> <link rel="preload" href="/fonts/my-font.woff2" rel="external nofollow" as="font" type="font/woff2" crossorigin /> <link rel="modulepreload" href="/assets/main.js" rel="external nofollow" />
九、總結(jié)建議：實用組合方案
| 項目類型 | 推薦組合策略 |
|---|---|
| 內(nèi)容靜態(tài)網(wǎng)站 | 預(yù)渲染 + 骨架屏 + 圖片懶加載 |
| 后臺管理系統(tǒng) | 路由懶加載 + 模塊延遲 + Gzip + 緩存優(yōu)化 |
| H5 頁面 / 小程序殼 | 內(nèi)聯(lián) CSS + 字體優(yōu)化 + 骨架屏 + preload |
| 企業(yè)官網(wǎng) / 產(chǎn)品頁 | 預(yù)渲染 + 骨架屏 + 關(guān)鍵 CSS 提取 + preload + 動效延遲加載 |
到此這篇關(guān)于減少 Vue 應(yīng)用白屏時間的經(jīng)驗總結(jié)的文章就介紹到這了,更多相關(guān)減少Vue白屏時間內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了vue+echarts實現(xiàn)進度條式柱狀圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue.js 實現(xiàn)點擊div標簽時改變樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)可增刪查改的成績單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
利用Vue+intro.js實現(xiàn)頁面新手引導(dǎo)流程功能
在同學們使用某些網(wǎng)站的新版本頁面的時候,經(jīng)常會出現(xiàn)一個類似于新手引導(dǎo)一樣的效果,來幫助同學們更好的熟悉新版本頁面的功能和使用,這篇文章主要給大家介紹了關(guān)于如何利用Vue+intro.js實現(xiàn)頁面新手引導(dǎo)流程功能的相關(guān)資料,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue項目如何引入公共頭部底部問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
本文通過實例代碼給大家介紹了Vue2.0權(quán)限樹組件實現(xiàn)代碼，需要的的朋友參考下吧2017-08-08
Vue.js每天必學之內(nèi)部響應(yīng)式原理探究
Vue.js每天必學之內(nèi)部響應(yīng)式原理探究，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
在vue中請求接口中，一個請求方法可能對應(yīng)后臺兩個請求接口，所以請求參數(shù)就會有所不同。需要我們先設(shè)置共同的參數(shù)，然后根據(jù)條件動態(tài)添加參數(shù)屬性2022-08-08
閑話少說，我們進入今天的小小五分鐘學習時間，前面我們了解了vue的組件，我們本文主要是講解vue的動態(tài)組件和內(nèi)置組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
uniapp中使用u-loadmore,loadText內(nèi)容不隨status改變刷新方式
這篇文章主要介紹了uniapp中使用u-loadmore,loadText內(nèi)容不隨status改變刷新方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05