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，在此列举一下我能找到的几个关于这个问题的技术博客：


但因为我比对过我正在写的项目和公司另外一个nuxt项目的文件的配置文件，认为不是这个问题，但是这时也只能死马当活马医，就尝试了一下，发现依然是不行，所以判断不是extractCSS的原因。

最终解决方案

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

结语