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