一.問題描述：通過原生檢查日志在網絡不好的情況下，由于vue打包后的第三方js包加載失敗導致h5頁面白屏。

二.解決方案：

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

2.組件化：項目中將能復用的部分組件化。

3.webpack實現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骨架屏：在頁面內容未加載完成的時候，先使用一些圖形進行占位，待內容加載完成之后再把它替換掉，即在index.html中的div#app內直接插入骨架屏相關內容即可。

5.ssr服務端渲染和nsr原生渲染。

? ? ? ? ?ssr渲染：（1）使用node.js作為轉發層

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

? ? ? ? ? ? ? ? ? ? ? ? ?（3）node服務將ajax返回的數據，和初始化完css數據、meta、title等信息的html基礎結構，以及html字符串中標簽上的方法綁定和外鏈js代碼執行等拼裝好返回給客戶端進行解析。

三、其他可能導致白屏的原因

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

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

? ? ? ? ?（2）第三方的，要先進行轉換

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

? ? ? ?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。