Cloudflare网站加载时闪烁问题解决

在部署静态网页到Cloudflare时遇到了问题，网站如果在Dark模式，加载时会闪一下。

问题表现

主要的问题表现很容易观测，如果网页的默认主题是Light。此时切换到Dark模式后刷新页面，会有一瞬间是白色然后再切换到暗色。而如果主题是默认模式，则不会闪烁。

显然的，网页在一开始的时候使用了默认的颜色主题。

比较让人头痛的是，在本地进行测试时一切正常。而且如果使用Cloudflare Page的预览网址也不会有问题。

网站本身是用Nuxt加TailwindCss开发的，一开始怀疑是AI帮我搓的主题切换的逻辑有问题，可是换成@nuxtjs/color-mode的库实现后依然有问题。

最后在Nuxt的部署说明页面找到了可能的原因，测试后果然解决了。

Nuxt部署文档有提到要关闭Rocket Loader™。一开始没考虑到是因为有看到文档说可以在Cloudflare无配置部署，就没继续看文档了。

现在网上找到的很多教程都是针对旧UI的，与当前的版本差别很大，一时半会很难找到。好在Cloudflare官方的文档里面可以找到最新的配置位置。

这里就不截图了，当前可以直接从Cloudflare Rocket Loader™文档中直接跳转到配置界面。

我当前的配置位置url是这样的，如果需要自己拼接的话可以参考

https://dash.cloudflare.com/7d3ba60f66d6ce6e0zzf5568ffaa98d6/ch-wind.com/speed/optimization/content

Rocket Loader™这个功能会打乱JavaScript的加载顺序，而Nuxt的静态页面在对主题切换进行处理时是依赖于这个顺序的。打乱之后就会出现先使用了默认主题，然后才切换到目标主题的情况。

至于为什么预览版的网页没有问题，个人猜测在预览版Rocket Loader™功能是没有启用的。