頁面白屏來源：
- 解析html。
- 客戶端js渲染。
- 加載異步組件渲染。
- ajax獲取數(shù)據(jù)渲染。
解析html
- 減小html大小。
- async/deferer腳本執(zhí)行。
- 腳本放最后。
客戶端js渲染
// 使用vue-cli構(gòu)建后的index.html,內(nèi)容由客戶端js渲染
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/static/js/manifest.6b0afe9dae29c384450a.js"></script>
<script type="text/javascript" src="/static/js/vendor.426ef21560bb1458790e.js"></script>
<script type="text/javascript" src="/static/js/app.7721a2d8031d1ad79913.js"></script>
</body>
可以在模板html中增加初始內(nèi)容，客戶端渲染出頁面時會自動替換掉。
<body>
<div id="app">
// 在這里增加初始內(nèi)容
</div>
<!-- built files will be auto injected -->
</body>
問題
- 當(dāng)通過url直接訪問應(yīng)用/foo 和/bar，都會先顯示
// 在這里增加初始內(nèi)容。 -
如果組件是異步加載，則下載和渲染組件期間會白屏。
image.png
加載異步組件渲染。
取消動態(tài)組件
// const Foo = () => import('@/components/Foo')
// const Bar = () => import('@/components/Bar')
import Foo from '@/components/Foo'
import Bar from '@/components/Bar'
ajax獲取數(shù)據(jù)渲染
比如列表數(shù)據(jù)響應(yīng)前ul為空，可以使用骨架屏占位。
<ul v-if="users.length > 0">
<li v-for="user in users"
:key="user.name">{{ user.name }}</li>
</ul>
<div v-else>
<!-- 使用svg,節(jié)省網(wǎng)絡(luò)下載時間，但是動畫會被js阻塞 -->
<svg width="750" height="191" class="svgclz">
<circle cx="95" cy="102" r="63" fill="#edeff0" mask="url(#shining)" />
<rect width="160" height="35" x="190" y="45" fill="#edeff0" mask="url(#shining)" />
<rect width="400" height="35" x="190" y="90" fill="#edeff0" mask="url(#shining)" />
<line x1="0" y1="190" x2="750" y2="190" stroke="#edeff0"></line>
</svg>
</div>
預(yù)渲染 pre-render
預(yù)渲染有點像服務(wù)器端渲染和靜態(tài)站點生成。
在構(gòu)建應(yīng)用時，使用預(yù)渲染器啟動一個類瀏覽器環(huán)境用來加載指定路由，并將得到的html轉(zhuǎn)存儲到指定的文件目錄，構(gòu)建出來的 html 文件已有部分內(nèi)容，減少白屏?xí)r間。
不適合渲染動態(tài)頁面；渲染大量路由時，會延長構(gòu)建時間。
參考：Prerender Vue.js Apps with prerender-spa-plugin v3
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const PuppeteerRenderer = PrerenderSPAPlugin.PuppeteerRenderer;
...
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, '../dist'),
routes: ['/', '/foo', '/bar'],
renderer: new PuppeteerRenderer({
// // eg, with `document.dispatchEvent(new Event('custom-render-trigger'))`
// captureAfterDocumentEvent: 'custom-render-trigger',
// // Optional - Wait to render until the specified element is detected using `document.querySelector`
renderAfterElementExists: '#app',
})
})
...
文件目錄
index.html
bar/index.html
foo/index
