Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

第41题(2019-09-17):vue 如何优化首页的加载速度?vue 首页白屏是什么问题引起的?如何解决呢? #43

Open
qappleh opened this issue Sep 17, 2019 · 1 comment
Labels

Comments

@qappleh
Copy link
Owner

qappleh commented Sep 17, 2019

No description provided.

@qappleh
Copy link
Owner Author

qappleh commented Sep 18, 2019

首先分析原因
VUE首页加载过慢,其原因是因为它是一个单页应用,需要将所有需要的资源(比如app.js vendor.js)都下载到浏览器端并解析,所以当网速差的时候会产生一定程度的白屏。

考虑解决办法
1.使用首屏SSR + 跳转SPA方式来优化
2.改单页应用为多页应用,需要修改webpack的entry
3.改成多页以后使用应该使用prefetch的就使用
4.处理加载的时间片,合理安排加载顺序,尽量不要有大面积空隙
5.CDN资源还是很重要的,最好分开,也能减少一些不必要的资源损耗
6.使用Quicklink,在网速好的时候 可以帮助你预加载页面资源
7.骨架屏这种的用户体验的东西一定要上,最好借助stream先将这部分输出给浏览器解析
8.合理使用web worker优化一些计算
9.缓存一定要使用,但是请注意合理使用
10.大概就这么多,最后可以借助一些工具进行性能评测,重点调优,例如使用performance自己实现下等
个人意见,如有错误,烦请指正,谢谢!

@qappleh qappleh added the vue label Nov 27, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant