解決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'], *調(diào)用* this.reload()
vue頁面白屏的原因及優(yōu)化
一、原因
單頁面應(yīng)用的 html 是靠 js 生成，因為首屏需要加載很大的js文件(app.js 和vendor.js)，所以當(dāng)網(wǎng)速差的時候會產(chǎn)生一定程度的白屏
二、解決辦法
1、路由懶加載，組件懶加載
路由懶加載
// 1、Vue異步組件技術(shù)：
{
? 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，即內(nèi)容分發(fā)網(wǎng)絡(luò)。CDN 是構(gòu)建在網(wǎng)絡(luò)之上的內(nèi)容分發(fā)網(wǎng)絡(luò)，依靠部署在各地的邊緣服務(wù)器，通過中心平臺的負(fù)載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊，使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡(luò)擁塞，提高用戶訪問響應(yīng)速度和命中率。CDN 的關(guān)鍵技術(shù)主要有內(nèi)容存儲和分發(fā)技術(shù)。
隨著項目越做越大，依賴的第三方 npm 包越來越多，構(gòu)建之后的文件也會越來越大。再加上又是單頁應(yīng)用，這就會導(dǎo)致在網(wǎng)速較慢或者服務(wù)器帶寬有限的情況出現(xiàn)長時間的白屏。此時我們可以使用 CDN 的方法，優(yōu)化網(wǎng)絡(luò)加載速度。
將 vue、vue-router、vuex、axios 這些 vue 全家桶的資源，全部改為通過 CDN 鏈接獲取，在 index.html 里插入相應(yīng)鏈接。
<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'
? ? }
?}卸載相關(guān)依賴的 npm 包
npm uninstall ?vue vue-router vuex axios
3、gZip 加速優(yōu)化
所有現(xiàn)代瀏覽器都支持 gzip 壓縮，啟用 gzip 壓縮可大幅縮減傳輸資源大小，從而縮短資源下載時間，減少首次白屏?xí)r間，提升用戶體驗。
gzip 對基于文本格式文件的壓縮效果最好（如：CSS、JavaScript 和 HTML），在壓縮較大文件時往往可實現(xiàn)高達(dá) 70-90% 的壓縮率，對已經(jīng)壓縮過的資源（如：圖片）進(jìn)行 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ù)進(jìn)行壓縮
? ? ? ? deleteOriginalAssets: false, // 是否刪除原文件
? ? ? })
? ? )
? }
}4、vue.config.js中關(guān)閉productionSourceMap
productionSourceMap是用來報錯時定位到代碼位置。
如果不想讓別人看到源碼可以設(shè)置為false，并且可以減少打包后包的體積，加密源碼。
productionSourceMap: false,
5、SSR，服務(wù)端渲染，在服務(wù)端事先拼裝好首頁所需的 html
6、首頁加 loading或 骨架屏（優(yōu)化體驗）
隨著 SPA 在前端界的逐漸流行，單頁面應(yīng)用不可避免地給首頁加載帶來壓力，此時良好的首頁用戶體驗至關(guān)重要。很多 APP 采用了“骨架屏”的方式去展示未加載內(nèi)容，給予了用戶煥然一新的體驗。
所謂的骨架屏，就是在頁面內(nèi)容未加載完成的時候，先使用一些圖形進(jìn)行占位，待內(nèi)容加載完成之后再把它替換掉。在這個過程中用戶會感知到內(nèi)容正在逐漸加載并即將呈現(xiàn)，降低了“白屏”的不良體驗。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3 + Vue-PDF 實現(xiàn)PDF 文件在線預(yù)覽實戰(zhàn)
這篇文章主要介紹了Vue3 + Vue-PDF 實現(xiàn)PDF 文件在線預(yù)覽實戰(zhàn)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
Vue keepAlive 數(shù)據(jù)緩存工具實現(xiàn)返回上一個頁面瀏覽的位置
這篇文章主要介紹了Vue keepAlive 數(shù)據(jù)緩存工具，實現(xiàn)返回上一個頁面瀏覽的位置，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
詳解Vue開發(fā)網(wǎng)站seo優(yōu)化方法
這篇文章主要介紹了Vue開發(fā)網(wǎng)站seo優(yōu)化方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
本文主要介紹了Vue虛擬Dom到真實Dom的轉(zhuǎn)換，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
跨域問題是由瀏覽器引起的安全限制,而不是Vue框架本身導(dǎo)致的,Vue本身并不限制跨域訪問,它只是一個前端框架,負(fù)責(zé)構(gòu)建用戶界面和處理數(shù)據(jù)邏輯,本文給大家介紹了在Vue中解決跨域問題的常用方式,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)自定義全局右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
在Web應(yīng)用程序中,實現(xiàn)拖拽和排序功能是非常常見的需求,本文為大家介紹了如何使用Vue來實現(xiàn)一個簡單但功能強(qiáng)大的拖拽與排序功能,感興趣的小伙伴可以參考下2023-10-10
Effect幾乎是Vue3.0中最重要的一個功能了,計算屬性監(jiān)聽函數(shù)都是基于effect實現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于vue3中effect函數(shù)到底是什么的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
element-ui如何取消el-table的hover狀態(tài)(取消高亮顯示)
在一個項目中需要對element-ui的table組件進(jìn)行一些樣式的修改,其中就包括對hover效果的處理,下面這篇文章主要給大家介紹了關(guān)于element-ui如何取消el-table的hover狀態(tài)(取消高亮顯示)的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue項目記錄鎖定和解鎖功能實現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03