通过webpack打包后的vue-cli项目代码如下
在弱网环境下header里面的俩JS加载速度很慢,导致白屏时间过长,index.html代码如下
在body里面有正在加载的字样,但是header里面的JS加载不完,body的内容无法显示。
请问能否修改header里面的js的加载位置放到body底部?或者有什么其他的方法让正在加载这几个字最快速度显示?
通过webpack打包后的vue-cli项目代码如下
在弱网环境下header里面的俩JS加载速度很慢,导致白屏时间过长,index.html代码如下
在body里面有正在加载的字样,但是header里面的JS加载不完,body的内容无法显示。
请问能否修改header里面的js的加载位置放到body底部?或者有什么其他的方法让正在加载这几个字最快速度显示?
spa出现白屏很正常,因为你整个项目所有的页面都打包在js中了,特别是你的项目模块越多,这种问题越明显,你所需要做的就是优化页面,使用异步加载,就好像我们使用ajax一样,请求了再加载,未请求就不要加载相关的数据。只加载一些dom,特别是图片等多媒体资源,出现在首页要用预加载或者lazyload来处理。你可以跟你们的后台商量一下,首页的dom后台来渲染。
这里可以给这些js文件添加了defer属性,可以提高部分性能。
最简单的方法就是将以控制loading的js单独摘出来,这样整体的运行就不收其它js文件的影响了
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
2 回答4.7k 阅读✓ 已解决
4 回答4.3k 阅读✓ 已解决
修改 html-webpack-plugin 插件的
inject
选项为body