Nuxt2 渲染时html比css加载快，导致闪屏/CSS样式迟滞/抖动问题记录

问题场景：

最近在用Nuxt2重写公司官网，但因为笔者不是专业前端，之前虽然也用vue2来写前端，但是用nuxt2来写项目还是第一次。在开发过程中虽然也磕磕碰碰，但因为开发的是官网，偏CMS型的网站，所以没有太多JS层面的问题，主要是CSS问题比较多要慢慢调。然而在我开发完成部署预发环境时，发现在刷新页面时会出现严重的闪屏或称为页面CSS样式抖动现象

具体表现：

在刷新页面时先加载出HTML代码，此时页面就是一个完全没样式的很丑的纯html页面，要等0.5秒-1秒后才加载出CSS样式并渲染出最终带样式的页面。这一闪而过的纯html就很难受了，也非常影响用户体验

尝试解决：

第一次尝试

开始时我怀疑是首屏性能问题，在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.csdn.net/weixin_42224055/article/details/106053404
https://juejin.cn/post/6946080450330755102
但因为我比对过我正在写的项目和公司另外一个nuxt项目的文件的配置文件，认为不是这个问题，但是这时也只能死马当活马医，就尝试了一下，发现依然是不行，所以判断不是extractCSS的原因。

最终解决方案

最后实在没有办法，只能创建一个新的空白的nuxt2项目，然后把我的项目目录、文件、代码一部分一部分的复制过来，看看是从哪一步开始出问题。幸亏我的代码不多，最后终于找到问题的原因！ 问题是出在根目录的app.html文件中，根据nuxt2的官方手册，app.html一般不需要手动创建的，nuxt在运行时会自动创建，而且通常这个文件也不需要改动的。

关于app.html的描述详见官方手册的这个章节

如需引入额外的js或css文件，可以通过nuxt.config.js来配置（官方也推荐这样配置），而需要模板也可以通过layouts目录中自定义模板实现，完全不需要手动在根目录创建或者修改app.html的。而我是因为最开始的时候不熟悉nuxt2，看了官方手册关于介绍目录结构的章节后，自己理解错误，套用了vue的开发理念，所以就手多在根目录创建了app.html。在我删除app.html后，终于解决了闪屏问题。

结语

所以开发nuxt2时如遇同样出现闪屏现象的同学可以检查一下自己是不是在根目录下创建了app.html这个文件。写这篇文章主要是这个坑可能太小众了（大部分人都不会这么闲，手多在根目录手动创建一个app.html），我找遍了百度和bing，都没找到解决方案，最后只能通过创建一个新nuxt项目的方式一点点排查，花了几小时才最终排查出问题。所以在此记录一下，也希望能帮到其他遇到同样问题的同学。但本人因为不是专业前端，对nuxt也不熟悉，只查到是app.html文件的问题，最终也无法查出底层原理是什么，如果有知道的同学也欢迎告诉我，谢谢！