快捷導(dǎo)航

Vue出現(xiàn)首屏白屏的六種解決方法小結(jié)

更新時(shí)間：2025年02月08日 10:42:24 作者：worktile

這篇文章主要為大家詳細(xì)介紹了Vue中出現(xiàn)首屏白屏的六種解決方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下

一、啟用路由懶加載

使用路由懶加載可以顯著減少應(yīng)用的初始加載時(shí)間。Vue.js 提供了動(dòng)態(tài)導(dǎo)入（Dynamic Import）的功能，可以通過(guò)這種方式實(shí)現(xiàn)路由懶加載。以下是具體步驟：

1.配置路由懶加載：

修改 router/index.js 文件，使用 import 進(jìn)行動(dòng)態(tài)導(dǎo)入。

const Home = () => import('@/views/Home.vue');
const About = () => import('@/views/About.vue');
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: About
    }
];

2.確認(rèn)打包配置：

確保你的 Webpack 配置支持動(dòng)態(tài)導(dǎo)入。Vue CLI 默認(rèn)配置已經(jīng)支持，如果是自定義配置，需要檢查 Webpack 配置文件。

通過(guò)這種方式，只有在用戶訪問(wèn)某個(gè)路由時(shí)，才會(huì)加載對(duì)應(yīng)的組件，從而減少初始加載時(shí)間，提高首屏渲染速度。

二、優(yōu)化打包體積

減小應(yīng)用的打包體積有助于提升首屏加載速度?？梢酝ㄟ^(guò)以下方法實(shí)現(xiàn)：

1.使用 Webpack 優(yōu)化配置：

使用 splitChunks 插件來(lái)分割代碼。

optimization: {
    splitChunks: {
        chunks: 'all',
    },
}

2.移除未使用的依賴：

清理項(xiàng)目中未使用的依賴庫(kù)和文件。

3.開啟 Gzip 壓縮：

配置服務(wù)器開啟 Gzip 壓縮，減小傳輸文件大小。

三、使用骨架屏

骨架屏是一種占位符，用于在數(shù)據(jù)尚未加載完畢時(shí)展示給用戶，避免白屏。使用骨架屏的步驟如下：

1.創(chuàng)建骨架屏組件：

創(chuàng)建一個(gè)簡(jiǎn)單的骨架屏組件，模擬頁(yè)面的基本布局。

<template>
    <div class="skeleton">
        <div class="skeleton-header"></div>
        <div class="skeleton-content"></div>
    </div>
</template>

2.在主組件中引用骨架屏：

在主組件加載時(shí)，先展示骨架屏，數(shù)據(jù)加載完畢后再切換至真實(shí)內(nèi)容。

<template>
    <div>
        <Skeleton v-if="loading" />
        <RealContent v-else />
    </div>
</template>
<script>
export default {
    data() {
        return {
            loading: true,
        };
    },
    mounted() {
        // 模擬數(shù)據(jù)加載
        setTimeout(() => {
            this.loading = false;
        }, 2000);
    },
};
</script>

四、服務(wù)端渲染

使用服務(wù)端渲染（SSR）可以在服務(wù)器端生成 HTML，從而避免客戶端渲染帶來(lái)的白屏問(wèn)題。Vue 提供了 Nuxt.js 框架來(lái)方便地實(shí)現(xiàn)服務(wù)端渲染。

1.安裝 Nuxt.js：

使用 Vue CLI 安裝 Nuxt.js。

vue create my-nuxt-app
cd my-nuxt-app
vue add nuxt

2.配置 Nuxt.js 項(xiàng)目：

根據(jù)項(xiàng)目需求配置 Nuxt.js，例如路由、狀態(tài)管理等。

通過(guò)服務(wù)端渲染，可以在服務(wù)器端生成完整的 HTML 頁(yè)面，客戶端只需加載靜態(tài)資源，極大地提升了首屏渲染速度。

五、減少依賴庫(kù)

減少依賴庫(kù)的使用可以減小打包體積，從而提升加載速度?？梢酝ㄟ^(guò)以下方法實(shí)現(xiàn)：

1.移除未使用的依賴：

定期檢查項(xiàng)目中的依賴庫(kù)，移除未使用的部分。

2.使用輕量級(jí)庫(kù)：

優(yōu)先選擇功能相似但體積更小的庫(kù)。例如，使用 axios 代替 request。

3.按需引入：

對(duì)于大型 UI 庫(kù)，可以按需引入組件，避免一次性引入所有組件。

import { Button } from 'element-ui';
Vue.component(Button.name, Button);

六、異步加載資源

通過(guò)異步加載資源可以減小初始加載體積，提升首屏渲染速度。具體方法包括：

1.使用 <link rel="preload">：

提前加載關(guān)鍵資源，如字體和圖片。

<link rel="preload" href="/path/to/font.woff2" rel="external nofollow"  as="font" type="font/woff2" crossorigin="anonymous">

2.異步加載非關(guān)鍵 CSS：

將非關(guān)鍵 CSS 文件異步加載，避免阻塞渲染。

<link rel="stylesheet" href="styles.css" rel="external nofollow"  media="print" onload="this.media='all'">

3.延遲加載圖片和視頻：

使用 lazyload 技術(shù)，延遲加載圖片和視頻，只有在需要時(shí)才加載。

<img src="placeholder.jpg" data-src="real-image.jpg" class="lazyload">

總結(jié)來(lái)說(shuō)，通過(guò)啟用路由懶加載、優(yōu)化打包體積、使用骨架屏、服務(wù)端渲染、減少依賴庫(kù)和異步加載資源，可以有效解決 Vue 應(yīng)用的首屏白屏問(wèn)題。具體實(shí)施過(guò)程中，可以根據(jù)項(xiàng)目的實(shí)際情況選擇合適的優(yōu)化方法，并結(jié)合以上多種手段，進(jìn)一步提升用戶體驗(yàn)。