解決vue頁面重新整理產生白屏的問題

2022-07-28 14:01:20

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，並且可以減少打包後包的體積，加密原始碼。