欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

Nuxt2 渲染 html 的加载速度快于 css,导致闪屏/CSS 风格滞后/抖动问题已记录 - 正在尝试解决:

最编程 2024-04-01 15:01:40
...

第一次尝试

开始时我怀疑是首屏性能问题,在vue的开发中也遇过,但是主要的异常现象表现是白屏,白屏1-3秒才出现页面。我尝试把asyncData中的全部请求都注释掉,然后重新打包运行,刷新页面时,通过F12查看页面加载时间从500ms降低到150ms了,但是发现依然存在上述的闪屏现象。所以判断并不是因为asyncData中请求太多/太慢导致的。

第二次尝试

既然不是页面的asyncData中的请求导致的。我就开始检查是否配置问题导致,因为我公司刚好有另外一个也是用nuxt2写的项目(不是我开发的),所以就参照着来检查nuxt.config.js文件,发现几乎没什么差别,连package.json的依赖都差不多。我后面甚至把package.json的依赖和nuxt.config.js文件的关键配置都改成一样,还是不行。所以判断不是package.json的依赖和nuxt.config.js文件配置问题

第三次尝试

经过上面的尝试后,实在搞不明白,所以就尝试面向百度编程,在百度搜索了一轮发现的确有几个相关的技术博客,提到的解决方案都差不多,都是说配置extractCSS,在此列举一下我能找到的几个关于这个问题的技术博客:
https://blog.****.net/weixin_42224055/article/details/106053404
https://juejin.cn/post/6946080450330755102
但因为我比对过我正在写的项目和公司另外一个nuxt项目的文件的配置文件,认为不是这个问题,但是这时也只能死马当活马医,就尝试了一下,发现依然是不行,所以判断不是extractCSS的原因。