[{"data":1,"prerenderedAt":146},["ShallowReactive",2],{"page-Cloudflare-1":3,"page-count-Cloudflare":100},[4],{"id":5,"title":6,"body":7,"date":131,"description":13,"extension":132,"meta":133,"navigation":139,"path":140,"seo":141,"stem":142,"tags":143,"__hash__":145},"blogs\u002Fblogs\u002F2026\u002Fcloudflare-static-site-theme-flush.md","Cloudflare网站加载时闪烁问题解决",{"type":8,"value":9,"toc":122},"minimark",[10,14,18,21,24,32,47,50,54,68,72,75,84,87,104,107,112,118],[11,12,13],"p",{},"在部署静态网页到Cloudflare时遇到了问题，网站如果在Dark模式，加载时会闪一下。",[15,16,17],"h2",{"id":17},"问题表现",[11,19,20],{},"主要的问题表现很容易观测，如果网页的默认主题是Light。此时切换到Dark模式后刷新页面，会有一瞬间是白色然后再切换到暗色。而如果主题是默认模式，则不会闪烁。",[11,22,23],{},"显然的，网页在一开始的时候使用了默认的颜色主题。",[11,25,26,27,31],{},"比较让人头痛的是，在本地进行测试时一切正常。而且如果使用",[28,29,30],"code",{},"Cloudflare Page","的预览网址也不会有问题。",[11,33,34,35,38,39,42,43,46],{},"网站本身是用",[28,36,37],{},"Nuxt","加",[28,40,41],{},"TailwindCss","开发的，一开始怀疑是AI帮我搓的主题切换的逻辑有问题，可是换成",[28,44,45],{},"@nuxtjs\u002Fcolor-mode","的库实现后依然有问题。",[11,48,49],{},"最后在Nuxt的部署说明页面找到了可能的原因，测试后果然解决了。",[15,51,53],{"id":52},"关闭rocketloader","关闭RocketLoader",[11,55,56,63,64,67],{},[57,58,62],"a",{"href":59,"rel":60},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fdeployment#cdn-proxy",[61],"nofollow","Nuxt部署文档","有提到要关闭",[28,65,66],{},"Rocket Loader™","。一开始没考虑到是因为有看到文档说可以在Cloudflare无配置部署，就没继续看文档了。",[69,70,71],"h3",{"id":71},"如何关闭",[11,73,74],{},"现在网上找到的很多教程都是针对旧UI的，与当前的版本差别很大，一时半会很难找到。好在Cloudflare官方的文档里面可以找到最新的配置位置。",[11,76,77,78,83],{},"这里就不截图了，当前可以直接从",[57,79,82],{"href":80,"rel":81},"https:\u002F\u002Fdevelopers.cloudflare.com\u002Fspeed\u002Foptimization\u002Fcontent\u002Frocket-loader\u002Fenable\u002F",[61],"Cloudflare Rocket Loader™","文档中直接跳转到配置界面。",[11,85,86],{},"我当前的配置位置url是这样的，如果需要自己拼接的话可以参考",[88,89,94],"pre",{"className":90,"code":91,"language":92,"meta":93,"style":93},"language-bash shiki shiki-themes github-light-high-contrast github-dark monokai","https:\u002F\u002Fdash.cloudflare.com\u002F7d3ba60f66d6ce6e0zzf5568ffaa98d6\u002Fch-wind.com\u002Fspeed\u002Foptimization\u002Fcontent\n","bash","",[28,95,96],{"__ignoreMap":93},[97,98,101],"span",{"class":99,"line":100},"line",1,[97,102,91],{"class":103},"sQ2Uj",[69,105,106],{"id":106},"问题原因",[11,108,109,111],{},[28,110,66],{},"这个功能会打乱JavaScript的加载顺序，而Nuxt的静态页面在对主题切换进行处理时是依赖于这个顺序的。打乱之后就会出现先使用了默认主题，然后才切换到目标主题的情况。",[11,113,114,115,117],{},"至于为什么预览版的网页没有问题，个人猜测在预览版",[28,116,66],{},"功能是没有启用的。",[119,120,121],"style",{},"html pre.shiki code .sQ2Uj, html code.shiki .sQ2Uj{--shiki-default:#702C00;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}",{"title":93,"searchDepth":123,"depth":124,"links":125},2,3,[126,127],{"id":17,"depth":123,"text":17},{"id":52,"depth":123,"text":53,"children":128},[129,130],{"id":71,"depth":124,"text":71},{"id":106,"depth":124,"text":106},"2026-09-07","md",{"layout":134,"excerpt":135},"post",{"type":8,"value":136},[137],[11,138,13],{},true,"\u002Fblogs\u002F2026\u002Fcloudflare-static-site-theme-flush",{"title":6,"description":13},"blogs\u002F2026\u002Fcloudflare-static-site-theme-flush",[144],"Cloudflare","Z_aiw_OGN3essYtse2W1UOcEPfcgySfFMwJ55wLXCdE",1789292571385]