在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ webpack打包的vue-cli項目js加載位置

webpack打包的vue-cli項目js加載位置

通過webpack打包后的vue-cli項目代碼如下

clipboard.png

在弱網(wǎng)環(huán)境下header里面的倆JS加載速度很慢,導致白屏時間過長,index.html代碼如下

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

回答
編輯回答
笨尐豬

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

最簡單的方法就是將以控制loading的js單獨摘出來,這樣整體的運行就不收其它js文件的影響了

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

上面的那些 js 是哪兒來的?
看上去,下面的那些 js 才是 webapck 打包生成的。

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

修改 html-webpack-plugin 插件的 inject 選項為 body

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

需要知道你的js里是有同步請求數(shù)據(jù)嗎?如果有需要通過對代碼結構的調整,改為異步,如果沒有耗時較長的操作,應該不會影響加載速度,畢竟如今的客戶端性能都是不錯的。

2018年2月14日 13:25