鍍金池/ 問(wèn)答/HTML/ webpack打包的vue-cli項(xiàng)目js加載位置

webpack打包的vue-cli項(xiàng)目js加載位置

通過(guò)webpack打包后的vue-cli項(xiàng)目代碼如下

clipboard.png

在弱網(wǎng)環(huán)境下header里面的倆JS加載速度很慢，導(dǎo)致白屏?xí)r間過(guò)長(zhǎng)，index.html代碼如下

clipboard.png
在body里面有正在加載的字樣，但是header里面的JS加載不完，body的內(nèi)容無(wú)法顯示。
請(qǐng)問(wèn)能否修改header里面的js的加載位置放到body底部？或者有什么其他的方法讓正在加載這幾個(gè)字最快速度顯示？

回答
編輯回答
笨尐豬

spa出現(xiàn)白屏很正常，因?yàn)槟阏麄€(gè)項(xiàng)目所有的頁(yè)面都打包在js中了，特別是你的項(xiàng)目模塊越多，這種問(wèn)題越明顯，你所需要做的就是優(yōu)化頁(yè)面，使用異步加載，就好像我們使用ajax一樣，請(qǐng)求了再加載，未請(qǐng)求就不要加載相關(guān)的數(shù)據(jù)。只加載一些dom，特別是圖片等多媒體資源，出現(xiàn)在首頁(yè)要用預(yù)加載或者lazyload來(lái)處理。你可以跟你們的后臺(tái)商量一下，首頁(yè)的dom后臺(tái)來(lái)渲染。
這里可以給這些js文件添加了defer屬性，可以提高部分性能。

最簡(jiǎn)單的方法就是將以控制loading的js單獨(dú)摘出來(lái)，這樣整體的運(yùn)行就不收其它js文件的影響了

2018年1月7日 05:55
編輯回答
誮惜顏

上面的那些 js 是哪兒來(lái)的？
看上去，下面的那些 js 才是 webapck 打包生成的。

2017年11月10日 15:37
編輯回答
笨笨噠

修改 html-webpack-plugin 插件的 inject 選項(xiàng)為 body

2018年1月29日 05:20
編輯回答
冷溫柔

需要知道你的js里是有同步請(qǐng)求數(shù)據(jù)嗎？如果有需要通過(guò)對(duì)代碼結(jié)構(gòu)的調(diào)整，改為異步，如果沒(méi)有耗時(shí)較長(zhǎng)的操作，應(yīng)該不會(huì)影響加載速度，畢竟如今的客戶端性能都是不錯(cuò)的。

2018年2月14日 13:25