Vue首頁加載白屏原因以及10種解決方法匯總

Posted on by

首先說一下首頁加載為什麼會白屏？

先說下Spa單頁面的加載過程

首先就是html，也就是FP階段

<div id="app"></div> 

頁面在導航後首次呈現出不同於導航前內容的時間點，有一個東西回來渲染在頁面上瞭

然後是靜態資源css，js，之後解析js，生成HTML,也就是FCP階段，css,js資源加載下來瞭，首次的內容繪制，有一個大結構瞭

<div id="app">
  <div class="header"></div>
</div>

比如app根目錄裡面有一個header,div

到最後，就是FMP，ajax請求數據之後，首次有效繪制，就是頁面加載差不多瞭，但是可能圖片還沒加載出來

總結：

從FP到FMP這個過程全是白屏，可能你的header如果有啥大背景色啊，這個背景色或許會出來,ajax之後，才會真正去解析我們的數據，把數據放入我們的html標簽中。

如下圖所示：

得說解決首屏加載慢的辦法瞭，我總結瞭10種！

1.預渲染

預渲染就是webpack打包時候渲染，通過無頭瀏覽器

無頭瀏覽器,打包的時候，可以把你index.html的內容放入你這個瀏覽器，但是你這個瀏覽器是空白的，然後當你進入頁面時候直接加載這個index.html，但是沒ajax請求

獲取到預渲染的頁面html內容,然後再放入index.html,再到CDN，直接請求html(相當於FMP提前到瞭FP),其實更像另外一種骨架屏，少瞭ajax請求

但是由於這樣做我們隻能添加死數據，而不能把ajax請求的數據渲染到首頁上，怎麼解決呢?

我們可以在app.vue中

<div id="header"></div>

比如要在這個header標簽裡面加ajax請求

直接在script中請求給它添加數據即可

document.querySelector('#header').html('...')

2.同構

何為同構渲染，就是一套代碼多端使用

現在有一些框架，Next，Nuxt，類似於渲染就是vue ->json ->vue-server-renderer ->html

3.SSR

服務端渲染也可以解決首屏加載慢這個問題，因為服務端會把所有數據全部渲染完成再返回給客戶端

ssr =>請求->node->解析 ->吐回給客戶端(帶請求數據)

但是有一個大問題，重要的是node層，高並發的解決

4.路由懶加載

可以通過plugin-syntax-dynamic-import 這個插件

Vue.component('async-component',(resolve)=>{
  import('./AsyncComponent.js')
  .then((AsyncComponent)=>{
    resolve(AsyncComponent.default)
  })
})

但是現在好像直接可以通過箭頭函數實現路由懶加載

const app = () =>import('')

5.quicklink

quicklink就是在瀏覽器空閑的時候去指定需要加載的數據,這個是谷歌開源的，可以去看看

6.使用Gzip壓縮

減少文件體積，加快首屏頁面打開速度

前提是服務器那邊得開啟gzip

前端需要做的事

npm i compression-webpack-plugin -D

vue.config.js

const CompressionPlugin = require("compression-webpack-plugin")

module.exports = {
  configureWebpack: () => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要壓縮的文件類型
            threshold: 10240, // 歸檔需要進行壓縮的文件大小最小值，我這個是10K以上的進行壓縮
            deleteOriginalAssets: false, // 是否刪除原文件
            minRatio: 0.8
          })
        ]
      }
    }
  }
}

7.外鏈CSS,JS文件

很多時候我們在main.js中直接import一些ui庫或者css文件啥的，以後可以在index.html，通過script外鏈引入，這樣就不會通過我們的webpack打包

8.webpack entry

這個就是將單頁改成多頁應用,比如一些組件中，vue.js vue-router等插件已經在某個頁面使用瞭，然後給它緩存起來，下次就無需加載

9.骨架屏

骨架屏就是在進入項目的FP階段，給它來一個類似輪廓的東西，當我們的頁面加載完成之後就消失，這個也很好做的，很多ui庫都有這個東西，可以參考一下

10.loading

首頁加一個loading或許是最原始的方法瞭，在index.html裡加一個loadingcss效果，當頁面加載完成消失

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：