解決vue頁面刷新產(chǎn)生白屏的問題

更新時間：2022年07月28日 11:02:59 作者：風雨中的小菜鳥

這篇文章主要介紹了解決vue頁面刷新產(chǎn)生白屏的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue頁面刷新產(chǎn)生白屏

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頁面白屏的原因及優(yōu)化

一、原因

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

二、解決辦法

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 資源優(yōu)化

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

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

將 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 加速優(yōu)化

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

gzip 對基于文本格式文件的壓縮效果最好（如：CSS、JavaScript 和 HTML），在壓縮較大文件時往往可實現(xiàn)高達 70-90% 的壓縮率，對已經(jīng)壓縮過的資源（如：圖片）進行 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的數(shù)據(jù)進行壓縮
? ? ? ? deleteOriginalAssets: false, // 是否刪除原文件
? ? ? })
? ? )
? }
}

4、vue.config.js中關閉productionSourceMap

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

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