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

Question

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

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

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

Answer 1

修改 html-webpack-plugin 插件的 inject 选项为 body

Answer 2

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

Answer 3

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

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

Answer 4

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