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

更新時間：2023年03月02日 15:13:33 作者：進(jìn)階的巨人001

這篇文章主要介紹了Vue首頁加載白屏原因以及10種解決方法匯總，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

1.預(yù)渲染

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

無頭瀏覽器,打包的時候，可以把你index.html的內(nèi)容放入你這個瀏覽器，但是你這個瀏覽器是空白的，然后當(dāng)你進(jìn)入頁面時候直接加載這個index.html，但是沒ajax請求

獲取到預(yù)渲染的頁面html內(nèi)容,然后再放入index.html,再到CDN，直接請求html(相當(dāng)于FMP提前到了FP),其實更像另外一種骨架屏，少了ajax請求

但是由于這樣做我們只能添加死數(shù)據(jù)，而不能把ajax請求的數(shù)據(jù)渲染到首頁上，怎么解決呢?

我們可以在app.vue中

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

比如要在這個header標(biāo)簽里面加ajax請求

直接在script中請求給它添加數(shù)據(jù)即可

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

2.同構(gòu)

何為同構(gòu)渲染，就是一套代碼多端使用

現(xiàn)在有一些框架，Next，Nuxt，類似于渲染就是vue ->json ->vue-server-renderer ->html

3.SSR

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

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

但是有一個大問題，重要的是node層，高并發(fā)的解決

4.路由懶加載

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

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

但是現(xiàn)在好像直接可以通過箭頭函數(shù)實現(xiàn)路由懶加載

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

5.quicklink

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

6.使用Gzip壓縮

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

前提是服務(wù)器那邊得開啟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, // 歸檔需要進(jìn)行壓縮的文件大小最小值，我這個是10K以上的進(jìn)行壓縮
            deleteOriginalAssets: false, // 是否刪除原文件
            minRatio: 0.8
          })
        ]
      }
    }
  }
}