一.問題描述：通過原生檢查日志在網(wǎng)絡(luò)不好的情況下，由于vue打包后的第三方j(luò)s包加載失敗導(dǎo)致h5頁面白屏。

二.解決方案：

1.減少第三方依賴：在package.json中把不需要的包刪除。

2.組件化：項(xiàng)目中將能復(fù)用的部分組件化。

3.webpack實(shí)現(xiàn)vue代碼分隔和懶加載：路由懶加載和組件按需加載。? ? ?

(1).路由懶加載 // r就是resolve const list = r => require.ensure([], () => r(require('../components/list/list')), 'list'); // 路由也是正常的寫法 這種是官方推薦的寫的 按模塊劃分懶加載 const router = new Router({routes: [{path: '/list/blog',component: list,name: 'blog'}] })(2).組件按需加載將import page1 from '@/page/page1' 改為 const page1 = () => import('@/page/page1')

4.使用vue骨架屏：在頁面內(nèi)容未加載完成的時(shí)候，先使用一些圖形進(jìn)行占位，待內(nèi)容加載完成之后再把它替換掉，即在index.html中的div#app內(nèi)直接插入骨架屏相關(guān)內(nèi)容即可。

5.ssr服務(wù)端渲染和nsr原生渲染。

? ? ? ? ?ssr渲染：（1）使用node.js作為轉(zhuǎn)發(fā)層

? ? ? ? ? ? ? ? ? ? ? ? ?（2）node服務(wù)從java獲取數(shù)據(jù)，這一階段的耗時(shí)主要取決于node服務(wù)與java服務(wù)的通信時(shí)間。

? ? ? ? ? ? ? ? ? ? ? ? ?（3）node服務(wù)將ajax返回的數(shù)據(jù)，和初始化完css數(shù)據(jù)、meta、title等信息的html基礎(chǔ)結(jié)構(gòu)，以及html字符串中標(biāo)簽上的方法綁定和外鏈js代碼執(zhí)行等拼裝好返回給客戶端進(jìn)行解析。

三、其他可能導(dǎo)致白屏的原因

? ? ?1、不支持ES6、ES7等新語法

? ? ? ? ? （1）入口引入babel-polyfill（第一行）

? ? ? ? ?（2）第三方的，要先進(jìn)行轉(zhuǎn)換

? ? 2、圖片懶加載，大圖片上上傳CDN

? ? ? ?

總結(jié)

以上是生活随笔為你收集整理的app中加载h5页面白屏问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。