web上关于sveltekit中的FOUC的信息不多。因为它是新的
SvelteKit split second unstyle html
在开发模式下显示未样式的内容
使用__layout.reset.svelte
我在生产中遇到了问题。我使用AWS EC2实例，免费层。会不会是免费层太慢了?人们在网上说，FOUC不应该在prod中发生。
会不会是我有不切实际的期望?我希望精确为零foc。
我可能会使用How to get rid of Flash of Unstyled Content，上面写着"隐藏所有内容，然后当你检测到页面已经完全加载时，取消隐藏。">
[一段时间后]是的，好吧，之前的博客文章工作，但有更好的方法吗?我看到一个网站的css直接放在html的头部，这意味着它不能加载没有css，或几乎。我能让它在一瞬间显示出来。在我看来，这个解决方案"足够好"。但是我能做得更好吗?
下面是在Svelte中有FOUC的人的代码:
app.html:
<body data-sveltekit-preload-data="hover" class="bg-azure" style="visibility: hidden">
<div style="display: contents">%sveltekit.body%</div>
</body>
可见性:隐藏:部分是至关重要的部分。
然后在任何你想要删除foc的页面:
onMount(() => {
document.body.style.visibility = 'visible' // erases 'hidden', replaces with 'visible'
})
请注意，这只在很小很小的站点上进行了测试，几乎可以立即加载。我得到这些值做硬重新加载(转储缓存第一)在Chrome:DOMContentLoaded: 420 ms || Load: 1.16 s
您是在编写自己的CSS还是使用组件库/CSS框架?
我面临着同样的问题，即使在生产中，我做的第一件事就是改变sveltekit.config.js，在构建时启用预压缩:
import adapter from '@sveltejs/adapter-node'; // using node adapter
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: vitePreprocess(),
kit: {
adapter: adapter({
precompress: true // default is false per documentation
})
}
};
export default config;
真正为我修复的是确保我的组件被服务器端渲染，我使用svelteui所以我所做的是，我创建了一个hooks。server.ts文件在src/文件夹，我添加:
import { prepareStylesSSR } from '@svelteuidev/core';
export const handle = prepareStylesSSR;
之后没有更多的FOUC。
更多关于钩子的内容。