webpack打包的vue-cli项目js加载位置

通过webpack打包后的vue-cli项目代码如下

clipboard.png

在弱网环境下header里面的俩JS加载速度很慢,导致白屏时间过长,index.html代码如下

clipboard.png
在body里面有正在加载的字样,但是header里面的JS加载不完,body的内容无法显示。
请问能否修改header里面的js的加载位置放到body底部?或者有什么其他的方法让正在加载这几个字最快速度显示?

阅读 5.3k
4 个回答

需要知道你的js里是有同步请求数据吗?如果有需要通过对代码结构的调整,改为异步,如果没有耗时较长的操作,应该不会影响加载速度,毕竟如今的客户端性能都是不错的。

spa出现白屏很正常,因为你整个项目所有的页面都打包在js中了,特别是你的项目模块越多,这种问题越明显,你所需要做的就是优化页面,使用异步加载,就好像我们使用ajax一样,请求了再加载,未请求就不要加载相关的数据。只加载一些dom,特别是图片等多媒体资源,出现在首页要用预加载或者lazyload来处理。你可以跟你们的后台商量一下,首页的dom后台来渲染。
这里可以给这些js文件添加了defer属性,可以提高部分性能。

最简单的方法就是将以控制loading的js单独摘出来,这样整体的运行就不收其它js文件的影响了

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题