Vue首屏加載出現(xiàn)白屏問題的優(yōu)化實戰(zhàn)

更新時間：2025年05月08日 09:34:37 作者：非魚牛馬社

在實際開發(fā)中,Vue?應用首次加載時經常出現(xiàn)白屏問題,這嚴重影響了用戶體驗,本文將從多個角度出發(fā),提供全面的解決方案,大家可以根據需要進行選擇

一、背景

在實際開發(fā)中，Vue 應用首次加載時經常出現(xiàn)白屏問題，這嚴重影響了用戶體驗。本文將從多個角度出發(fā)，提供全面的解決方案。

二、問題分析

2.1 白屏原因

JavaScript 資源體積過大
首屏渲染機制的特點
資源加載順序不合理
服務端配置問題
瀏覽器緩存策略

三、解決方案

3.1 路由懶加載優(yōu)化

// 修改前
import UserDetails from './views/UserDetails.vue'

// 修改后 - 方案1：簡單懶加載
const UserDetails = () => import('./views/UserDetails.vue')

// 方案2：分組懶加載
const UserDetails = () => import(/* webpackChunkName: "user" */ './views/UserDetails.vue')
const UserProfile = () => import(/* webpackChunkName: "user" */ './views/UserProfile.vue')

3.2 骨架屏方案

手動實現(xiàn)

<!-- SkeletonComponent.vue -->
<template>
  <div class="skeleton">
    <div class="skeleton-header"></div>
    <div class="skeleton-content">
      <div class="skeleton-item"></div>
      <div class="skeleton-item"></div>
    </div>
  </div>
</template>

<style scoped>
.skeleton {
  padding: 15px;
}
.skeleton-header {
  height: 20px;
  background: #f2f2f2;
  margin-bottom: 15px;
  animation: skeleton-loading 1s infinite alternate;
}
.skeleton-item {
  height: 60px;
  background: #f2f2f2;
  margin-bottom: 10px;
  animation: skeleton-loading 1s infinite alternate;
}
@keyframes skeleton-loading {
  from { opacity: 0.6; }
  to { opacity: 1; }
}
</style>

自動化方案

推薦使用 vue-skeleton-webpack-plugin 插件：

npm install vue-skeleton-webpack-plugin -D

配置示例：

// vue.config.js
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: {
            app: path.join(__dirname, './src/skeleton.js'),
          },
        },
        minimize: true,
        quiet: true,
        router: {
          mode: 'hash',
          routes: [
            { path: '/', skeletonId: 'skeleton1' },
            { path: '/about', skeletonId: 'skeleton2' }
          ]
        }
      })
    ]
  }
}

3.3 資源預加載優(yōu)化

基礎配置

<!-- index.html -->
<head>
  <!-- DNS預解析 -->
  <link rel="dns-prefetch" >
  
  <!-- 預加載關鍵資源 -->
  <link rel="preload" href="/fonts/important.woff2" as="font" crossorigin>
  
  <!-- 預加載組件 -->
  <link rel="prefetch" href="/js/non-critical.js">
</head>

預渲染方案

對于靜態(tài)內容較多的頁面，推薦使用 prerender-spa-plugin：

npm install prerender-spa-plugin -D

配置示例：

// vue.config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/', '/about', '/contact'],
        renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
          renderAfterDocumentEvent: 'render-event'
        })
      })
    ]
  }
}

3.4 Webpack 構建優(yōu)化

體積分析與優(yōu)化

推薦使用 webpack-bundle-analyzer 分析打包體積：

npm install webpack-bundle-analyzer -D

// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  }
}

構建速度優(yōu)化

使用 hard-source-webpack-plugin 提升構建速度：

npm install hard-source-webpack-plugin -D

// vue.config.js
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new HardSourceWebpackPlugin()
    ]
  }
}

Gzip 壓縮

使用 compression-webpack-plugin 實現(xiàn)：

npm install compression-webpack-plugin -D

// vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        test: /\.(js|css|html|svg)$/,
        threshold: 10240
      })
    ]
  }
}

構建分析

使用 speed-measure-webpack-plugin 分析構建過程：

npm install speed-measure-webpack-plugin -D

// vue.config.js
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin")
const smp = new SpeedMeasurePlugin()

module.exports = {
  configureWebpack: smp.wrap({
    // ... 其他配置
  })
}

3.5 開發(fā)調試優(yōu)化

Vue DevTools

安裝：通過 Chrome 插件商店安裝
功能：
- 組件樹分析
- 性能分析
- 狀態(tài)管理
- 路由調試

性能分析工具

Chrome Lighthouse

內置于 Chrome DevTools
提供性能評分
給出優(yōu)化建議
生成詳細報告

webpack-dashboard

npm install webpack-dashboard -D

// vue.config.js
const DashboardPlugin = require('webpack-dashboard/plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new DashboardPlugin()
    ]
  }
}

3.6 服務端渲染 (SSR)

// entry-server.js
import { createApp } from './app'

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()

    router.push(context.url)

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }

      Promise.all(matchedComponents.map(Component => {
        if (Component.asyncData) {
          return Component.asyncData({
            store,
            route: router.currentRoute
          })
        }
      })).then(() => {
        context.state = store.state
        resolve(app)
      }).catch(reject)
    }, reject)
  })
}

3.7 靜態(tài)資源 CDN 加速

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.externals({
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios'
    })
  }
}

<!-- index.html -->
<head>
  <link rel="stylesheet" >
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.3"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.24.0"></script>
</head>

3.8 瀏覽器緩存優(yōu)化

# nginx.conf
location / {
    add_header Cache-Control "public, max-age=31536000";
    
    # 配置協(xié)商緩存
    etag on;
    if_modified_since exact;
    
    # 開啟gzip
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}

四、推薦插件和工具

4.1 性能優(yōu)化插件

vue-skeleton-webpack-plugin

npm install vue-skeleton-webpack-plugin -D

用于自動生成骨架屏，支持多路由頁面的骨架屏配置。

prerender-spa-plugin

npm install prerender-spa-plugin -D

預渲染插件，適用于靜態(tài)內容較多的頁面。

compression-webpack-plugin

npm install compression-webpack-plugin -D

用于 Gzip 壓縮，大幅減小文件體積。

webpack-bundle-analyzer

npm install webpack-bundle-analyzer -D

分析打包體積，找出大文件并優(yōu)化。

hard-source-webpack-plugin

npm install hard-source-webpack-plugin -D

為模塊提供中間緩存，大幅提升二次構建速度。

speed-measure-webpack-plugin

npm install speed-measure-webpack-plugin -D

分析 webpack 打包速度，找出耗時步驟。

4.2 開發(fā)調試工具

vue-devtools

Chrome 插件商店安裝
用于組件調試和性能分析

Lighthouse

Chrome 開發(fā)者工具內置
提供全面的性能評分和優(yōu)化建議

webpack-dashboard

npm install webpack-dashboard -D

優(yōu)化 webpack 開發(fā)輸出界面，提供更直觀的信息。

五、性能檢測與監(jiān)控

5.1 性能指標

First Paint (FP)
First Contentful Paint (FCP)
Time to Interactive (TTI)
Total Blocking Time (TBT)

5.2 檢測工具

Vue DevTools
Chrome Lighthouse
webpack-bundle-analyzer
Performance API

// 性能監(jiān)控示例
window.performance.mark('vue-init-start')

// Vue 初始化完成后
window.performance.mark('vue-init-end')
window.performance.measure(
  'vue-init',
  'vue-init-start',
  'vue-init-end'
)

六、最佳實踐建議

合理使用路由懶加載，避免一次性加載過多組件
使用骨架屏提升用戶體驗
關鍵資源預加載，非關鍵資源延遲加載
webpack 配置優(yōu)化，合理分包
考慮引入服務端渲染
利用瀏覽器緩存機制
持續(xù)監(jiān)控性能指標

七、總結

Vue 首屏白屏問題是一個復雜的性能優(yōu)化課題，需要從多個層面進行優(yōu)化：

代碼層面：路由懶加載、組件按需加載
構建層面：webpack 優(yōu)化、資源壓縮
架構層面：SSR、骨架屏
網絡層面：CDN、緩存策略

選擇合適的解決方案需要根據具體項目的情況來決定，建議從最容易實現(xiàn)且收益最大的方案開始著手優(yōu)化。

到此這篇關于Vue首屏加載出現(xiàn)白屏問題的優(yōu)化實戰(zhàn)的文章就介紹到這了,更多相關Vue首屏優(yōu)化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue實現(xiàn)typeahead組件功能(非?？孔V)
本文給大家分享通過Vue寫一個挺靠譜的typeahead組件功能，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧
2017-08-08
vue.js全局組件和局部組件示例代碼
組件是Vue.js的最核心的功能,所謂的組件化就是把頁面拆分成多個組件,每個組件單獨使用CSS,JS,模板,圖片等資源進行開發(fā)與維護,然后在制作網頁的時候根據需要調用相關的組件,這篇文章主要給大家介紹了關于vue.js全局組件和局部組件的相關資料,需要的朋友可以參考下
2022-12-12
使用vue ant design分頁以及表格分頁改為中文問題
這篇文章主要介紹了使用vue ant design分頁以及表格分頁改為中文問題，具有很好的參考價值，希望對大家有所幫助。
2023-04-04
Vue 中使用lodash對事件進行防抖和節(jié)流操作
這篇文章主要介紹了Vue 中使用lodash對事件進行防抖和節(jié)流操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
axios取消請求的實踐記錄分享
今天小編就為大家?guī)硪黄猘xios取消請求的實踐記錄分享，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
詳解vue中使用vue-quill-editor富文本小結（圖片上傳）
這篇文章主要介紹了詳解vue中使用vue-quill-editor富文本小結（圖片上傳），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
Vue3捕獲和處理不同層級的異常/錯誤的有效方法
項目中如果沒有對異常做處理,可能導致應用崩潰或顯示報錯信息影響用戶體驗,因此需要對不同層級的錯誤進行捕獲,所以本文給大家介紹了Vue3捕獲和處理不同層級的異常/錯誤的有效方法,需要的朋友可以參考下
2025-01-01
vue router 傳參獲取不到的解決方式
今天小編就為大家分享一篇vue router 傳參獲取不到的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue中如何使用elementUI表格動態(tài)行合并
這篇文章主要介紹了vue中如何使用elementUI表格動態(tài)行合并，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue Element前端應用開發(fā)之表格列表展示
在我們一般開發(fā)的系統(tǒng)界面里面，列表頁面是一個非常重要的綜合展示界面，包括有條件查詢、列表展示和分頁處理，以及對每項列表內容可能進行的轉義處理，本篇隨筆介紹基于Vue +Element基礎上實現(xiàn)表格列表頁面的查詢，列表展示和字段轉義處理。
2021-05-05

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue首屏加載出現(xiàn)白屏問題的優(yōu)化實戰(zhàn)

目錄

一、背景

二、問題分析

2.1 白屏原因

三、解決方案

3.1 路由懶加載優(yōu)化

3.2 骨架屏方案

3.3 資源預加載優(yōu)化

3.4 Webpack 構建優(yōu)化

3.5 開發(fā)調試優(yōu)化

3.6 服務端渲染 (SSR)

3.7 靜態(tài)資源 CDN 加速

3.8 瀏覽器緩存優(yōu)化

四、推薦插件和工具

4.1 性能優(yōu)化插件

4.2 開發(fā)調試工具

五、性能檢測與監(jiān)控

5.1 性能指標

5.2 檢測工具

六、最佳實踐建議

七、總結

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue首屏加載出現(xiàn)白屏問題的優(yōu)化實戰(zhàn)

目錄

一、背景

二、問題分析

2.1 白屏原因

三、解決方案

3.1 路由懶加載優(yōu)化

3.2 骨架屏方案

3.3 資源預加載優(yōu)化

3.4 Webpack 構建優(yōu)化

3.5 開發(fā)調試優(yōu)化

3.6 服務端渲染 (SSR)

3.7 靜態(tài)資源 CDN 加速

3.8 瀏覽器緩存優(yōu)化

四、推薦插件和工具

4.1 性能優(yōu)化插件

4.2 開發(fā)調試工具

五、性能檢測與監(jiān)控

5.1 性能指標

5.2 檢測工具

六、最佳實踐建議

七、總結

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具

一、背景

二、問題分析

五、性能檢測與監(jiān)控

七、總結