解決vue頁面刷新產生白屏的問題

Posted on by

vue頁面刷新產生白屏

app.vue

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>
<script>
export default {
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

將要引用的頁面 例如：home.vue

*註入*
inject: ['reload'],
*調用*
this.reload()

vue頁面白屏的原因及優化

一、原因

單頁面應用的 html 是靠 js 生成，因為首屏需要加載很大的js文件(app.js 和vendor.js)，所以當網速差的時候會產生一定程度的白屏

二、解決辦法

1、路由懶加載，組件懶加載

路由懶加載

// 1、Vue異步組件技術：
{
  path: '/home',
  name: 'Home',
  component: resolve => require(['../views/home.vue'], resolve)
}
// 2、es6提案的import()
{
  path: '/',
  name: 'home',
  component: () => import('../views/home.vue')
}
// 3、webpack提供的require.ensure()
{
  path: '/home',
  name: 'Home',
  component: r => require.ensure([],() =>  r(require('../views/home.vue')), 'home')
}

組件懶加載

components:{
  "dailyModal":()=>import("./dailyModal.vue")
},
components:{
  "dailyModal":resolve=>require(['./dailyModal.vue'],resolve)
},

2、CDN 資源優化

CDN 的全稱是 Content Delivery Network，即內容分發網絡。CDN 是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，通過中心平臺的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，降低網絡擁塞，提高用戶訪問響應速度和命中率。CDN 的關鍵技術主要有內容存儲和分發技術。

隨著項目越做越大，依賴的第三方 npm 包越來越多，構建之後的文件也會越來越大。再加上又是單頁應用，這就會導致在網速較慢或者服務器帶寬有限的情況出現長時間的白屏。此時我們可以使用 CDN 的方法，優化網絡加載速度。

將 vue、vue-router、vuex、axios 這些 vue 全傢桶的資源，全部改為通過 CDN 鏈接獲取，在 index.html 裡插入相應鏈接。

<body>
  <div id="app"></div>
      <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
      <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
      <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
     <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
     <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
</body>

在 vue.config.js 配置 externals 屬性

module.exports = {
 ···
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios':'axios'
    }
 }

卸載相關依賴的 npm 包

npm uninstall  vue vue-router vuex axios

3、gZip 加速優化

所有現代瀏覽器都支持 gzip 壓縮，啟用 gzip 壓縮可大幅縮減傳輸資源大小，從而縮短資源下載時間，減少首次白屏時間，提升用戶體驗。

gzip 對基於文本格式文件的壓縮效果最好（如：CSS、JavaScript 和 HTML），在壓縮較大文件時往往可實現高達 70-90% 的壓縮率，對已經壓縮過的資源（如：圖片）進行 gzip 壓縮處理，效果很不好。

const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
  if (process.env.NODE_ENV === 'production') {
    config.plugins.push(
      new CompressionPlugin({
        // gzip壓縮配置
        test: /\.js$|\.html$|\.css/, // 匹配文件名
        threshold: 10240, // 對超過10kb的數據進行壓縮
        deleteOriginalAssets: false, // 是否刪除原文件
      })
    )
  }
}

4、vue.config.js中關閉productionSourceMap

productionSourceMap是用來報錯時定位到代碼位置。

如果不想讓別人看到源碼可以設置為false，並且可以減少打包後包的體積，加密源碼。

productionSourceMap: false,

5、SSR，服務端渲染，在服務端事先拼裝好首頁所需的 html

6、首頁加 loading或 骨架屏（優化體驗）

隨著 SPA 在前端界的逐漸流行，單頁面應用不可避免地給首頁加載帶來壓力，此時良好的首頁用戶體驗至關重要。很多 APP 采用瞭“骨架屏”的方式去展示未加載內容，給予瞭用戶煥然一新的體驗。

所謂的骨架屏，就是在頁面內容未加載完成的時候，先使用一些圖形進行占位，待內容加載完成之後再把它替換掉。在這個過程中用戶會感知到內容正在逐漸加載並即將呈現，降低瞭“白屏”的不良體驗。 

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

推薦閱讀：