首先說一下首頁加載為什么會(huì)白屏？

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

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

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

頁面在導(dǎo)航后首次呈現(xiàn)出不同于導(dǎo)航前內(nèi)容的時(shí)間點(diǎn)，有一個(gè)東西回來渲染在頁面上了

然后是靜態(tài)資源css，js，之后解析js，生成HTML,也就是FCP階段，css,js資源加載下來了，首次的內(nèi)容繪制，有一個(gè)大結(jié)構(gòu)了

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

比如app根目錄里面有一個(gè)header,div

到最后，就是FMP，ajax請(qǐng)求數(shù)據(jù)之后，首次有效繪制，就是頁面加載差不多了，但是可能圖片還沒加載出來

總結(jié)：

從FP到FMP這個(gè)過程全是白屏，可能你的header如果有啥大背景色啊，這個(gè)背景色或許會(huì)出來,ajax之后，才會(huì)真正去解析我們的數(shù)據(jù)，把數(shù)據(jù)放入我們的html標(biāo)簽中。

如下圖所示：

得說解決首屏加載慢的辦法了，我總結(jié)了10種！

1.預(yù)渲染

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

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

獲取到預(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ù)渲染到首頁上，怎么解決呢?

我們可以在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，類似于渲染就是vue ->json ->vue-server-renderer ->html

3.SSR

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

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

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

4.路由懶加載

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

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

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

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

5.quicklink

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

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)行壓縮的文件大小最小值，我這個(gè)是10K以上的進(jìn)行壓縮
            deleteOriginalAssets: false, // 是否刪除原文件
            minRatio: 0.8
          })
        ]
      }
    }
  }
}

7.外鏈CSS,JS文件

很多時(shí)候我們?cè)趍ain.js中直接import一些ui庫或者css文件啥的，以后可以在index.html，通過script外鏈引入，這樣就不會(huì)通過我們的webpack打包

8.webpack entry

這個(gè)就是將單頁改成多頁應(yīng)用,比如一些組件中，vue.js vue-router等插件已經(jīng)在某個(gè)頁面使用了，然后給它緩存起來，下次就無需加載

9.骨架屏

骨架屏就是在進(jìn)入項(xiàng)目的FP階段，給它來一個(gè)類似輪廓的東西，當(dāng)我們的頁面加載完成之后就消失，這個(gè)也很好做的，很多ui庫都有這個(gè)東西，可以參考一下

10.loading

首頁加一個(gè)loading或許是最原始的方法了，在index.html里加一個(gè)loadingcss效果，當(dāng)頁面加載完成消失

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。