Vue首屏加載過慢出現(xiàn)長(zhǎng)時(shí)間白屏的實(shí)現(xiàn)

更新時(shí)間：2023年04月17日 09:58:25 作者：codeHu

本文主要介紹了Vue首屏加載過慢出現(xiàn)長(zhǎng)時(shí)間白屏的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

需求場(chǎng)景

公司業(yè)務(wù)展示官網(wǎng)開發(fā)，構(gòu)建版本后在外網(wǎng)測(cè)試環(huán)境下，發(fā)下首屏加載損耗高達(dá)幾十秒（服務(wù)器在國(guó)外，所以也導(dǎo)致加載時(shí)間變長(zhǎng)），于是采用了以下方法來達(dá)到提速目的。

問題攻克解決步驟如下：

1. 采用懶加載的方式（官網(wǎng)有所提及，這里就不做詳細(xì)描述）

2. webpack開啟gzip壓縮文件傳輸模式：

- gizp壓縮是一種http請(qǐng)求優(yōu)化方式，通過減少文件體積來提高加載速度。html、js、css文件甚至json數(shù)據(jù)都可以用它壓縮，可以減小60%以上的體積。　　- webpack打包時(shí)借助 compression webpack plugin實(shí)現(xiàn)gzip壓縮，安裝插件如下：npm i -D compression-webpack-plugin 　　- 在vue-cli 3.0 中，vue.config.js配置如下：

const CompressionPlugin = require('compression-webpack-plugin');//引入gzip壓縮插件
module.exports = {
    plugins:[
        new CompressionPlugin({//gzip壓縮配置
            test:/.js$|.html$|.css/,//匹配文件名
            threshold:10240,//對(duì)超過10kb的數(shù)據(jù)進(jìn)行壓縮
            deleteOriginalAssets:false,//是否刪除原文件
        })
    ]
}

- 服務(wù)器nginx開啟gzip:

gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6; #壓縮級(jí)別:1-10，數(shù)字越大壓縮的越好，時(shí)間也越長(zhǎng)
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256; #gzip壓縮最小文件大小，超出進(jìn)行壓縮（自行調(diào)節(jié)）
gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;預(yù)渲染

3.依賴模塊采用第三方cdn資源

- 在首頁(yè)index.html中引入，如：

<script?src="cdn.bootcss.com/vue/2.6.10/…">?
<script?src="cdn.bootcss.com/vuex/3.0.1/…">
<script?src="cdn.bootcss.com/vue-router/…">
<script?src="cdn.bootcss.com/element-ui/…">

- 修改vue.config.js，關(guān)于externals配置請(qǐng)自行查閱相關(guān)資料。

module.exports = {
    ...
    externals: {
        'vue': 'Vue',
        'vuex': 'Vuex',
        'vue-router': 'VueRouter',
        'element-ui': 'ELEMENT'
    }    
    ...
}

- 修改 src/store/index.js

...
// 注釋掉
// Vue.use(Vuex)
...

- 修改 src/router/index.js

// import Vue from 'vue'
import VueRouter from 'vue-router'
// 注釋掉
// Vue.use(VueRouter)
...

- 修改 src/main.js

import Vue from 'vue'
import ELEMENT from 'element-ui'
import App from './App.vue'
import router from './router'
import store from './store'
import 'mint-ui/lib/style.css'
import echarts from 'echarts'
import download from './mixin/download'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import '@/static/css/reset.css'
import '@/static/css/font.css'
import '@/assets/fonts/font.css'

Vue.config.productionTip = false
Vue.use(ELEMENT)

router.afterEach(() => {
  NProgress.done()
})

new Vue({
  router,
  store,
  render: h => h(App),
  // 添加mounted，不然不會(huì)執(zhí)行預(yù)編譯
  mounted () {
  document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')
這里element-ui變量名要用ELEMENT, 因?yàn)閑lement-ui的umd模塊名是ELEMENT

4. 預(yù)渲染

- 用到的插件：prerender-spa-plugin

yarn add prerender-spa-plugin -D
or npm install prerender-spa-plugin --save-dev

- vue.config.js中配置如下：

const PrerenderSpaPlugin = require('prerender-spa-plugin');
const Render = PrerenderSpaPlugin.PuppeteerRenderer;
const path = require('path');

configureWebpack: () => {
  if (process.env.NODE_ENV !== 'production') return;
  return {
    plugins: [
      new PrerenderSPAPlugin({
        // 生成文件的路徑，也可以與webpakc打包的一致。
        // 下面這句話非常重要?。?！
        // 這個(gè)目錄只能有一級(jí)，如果目錄層次大于一級(jí)，在生成的時(shí)候不會(huì)有任何錯(cuò)誤提示，在預(yù)渲染的時(shí)候只會(huì)卡著不動(dòng)。
        staticDir: path.join(__dirname, 'dist'),

        // 對(duì)應(yīng)自己的路由文件，比如a有參數(shù)，就需要寫成 /a/param1。
        routes: ['/', '/Login', '/Home'],

        // 這個(gè)很重要，如果沒有配置這段，也不會(huì)進(jìn)行預(yù)編譯
        renderer: new Renderer({
          inject: {
            foo: 'bar'
          },
          headless: false,
          // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對(duì)應(yīng)上。
          renderAfterDocumentEvent: 'render-event'
        })
      })
    ]
  };
}

- main.js中配置：

new Vue({
  router,
  store,
  render: h => h(App),
  // 添加mounted，不然不會(huì)執(zhí)行預(yù)編譯
  mounted () {
  document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

- 首頁(yè)加載一般進(jìn)入的是路由首頁(yè)，可以通過nginx配置，指向預(yù)渲染的首頁(yè)靜態(tài)頁(yè)，nginx配置如下：

location = / {
	root    /data/release/pokio_web/client/dist;
	try_files /home/index.html /index.html;
}

location / {
	root    /data/release/pokio_web/client/dist;
	try_files $uri $uri/ /index.html;
}

5.遇見的問題：

- 預(yù)渲染解決百度搜索引擎抓爬不到單頁(yè)面子鏈接問題?？梢园研枰猻eo頁(yè)面寫在頁(yè)面中隱藏起來。

<div style="display: none;">
  <a href="/about/about-.../" rel="external nofollow" >...</a>
  <a href="/home/" rel="external nofollow" >home</a>
  <a href="/clubs/" rel="external nofollow" >home</a>
</div>

- build后發(fā)現(xiàn)app.js還是很大：首屏引入的資源 svg有個(gè)過大的文件注意首屏引入的資源大小

結(jié)束語

整個(gè)流程跑通后首屏加載有了質(zhì)的飛躍國(guó)外的服務(wù)器在國(guó)內(nèi)加載首屏大概用了3s時(shí)間左右

到此這篇關(guān)于Vue首屏加載過慢出現(xiàn)長(zhǎng)時(shí)間白屏的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue首屏加載過慢白屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: