快捷導(dǎo)航

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

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

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

1.預(yù)渲染

預(yù)渲染就是webpack打包時(shí)候渲染，通過(guò)無(wú)頭瀏覽器

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

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

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

我們可以在app.vue中

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

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

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

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

2.同構(gòu)

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

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

3.SSR

服務(wù)端渲染也可以解決首屏加載慢這個(gè)問(wèn)題，因?yàn)榉?wù)端會(huì)把所有數(shù)據(jù)全部渲染完成再返回給客戶(hù)端

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

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

4.路由懶加載

可以通過(guò)plugin-syntax-dynamic-import 這個(gè)插件

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

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

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

5.quicklink

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

6.使用Gzip壓縮

減少文件體積，加快首屏頁(yè)面打開(kāi)速度

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