SvelteKit 瞬间无样式 html

Question

我通过 sveltekit cli 命令创建了一个基础应用程序。我选择的选项是 scss 和 typescript。就在我启动应用程序的一瞬间，我看到了 unstyled html。每次我创建的每个项目都会发生这种情况。我做了一些测试，似乎 css(app.scss) 在 html(localhost) 之后加载。另一个似乎一致的是每次我重新加载页面时都会发生这种情况，但不会在导航时发生。这表明它可能是服务器端的。在我看来，html 和 css 应该加载到同一个文件中，尽管 SvelteKit 可能有不同的方法。

我遇到了与 Sapper 相同的问题并已解决。但是我忘了我是怎么修的。新的 SvelteKit 设置也有很多不同之处。你们知道如何解决这个问题吗？

提前致谢

Answer 1

SvelteKit 不会在开发模式下将所有内容捆绑在一起并注入对 HMR 的支持。这可能会导致无样式内容的闪烁。

当您 deploy with an adapter.

时，无样式内容的闪烁应该会在生产模式中消失

此 stock SvelteKit template 不会闪烁未设置样式的内容。唯一的变化是将适配器从节点适配器更改为静态适配器，以便它可以托管在 Netlify 上。（我也用Netlify适配器确认过，所以静态和动态没有区别。）

如何使用现有的 SvelteKit 模板进行测试：

npm init svelte@next
yarn
yarn dev --open  # Dev server: flashes of unstyled content.

yarn build
cd build
node index.js    # Production server: no flashes of unstyled content.

来自SvelteKit announcement的解释：

Right now, we're seeing the rise of the unbundled development workflow, which is radically simpler: instead of eagerly bundling your app, a dev server can serve modules (converted to JavaScript, if necessary) on-demand, meaning startup is essentially instantaneous however large your app becomes.

...

That's not to say we're abandoning bundlers altogether. It's still essential to optimise your app for production, and SvelteKit uses Rollup to make your apps as fast and lean as they possibly can be (which includes things like extracting styles into static .css files).

SvelteKit 瞬间无样式 html

SvelteKit split second unstyled html

sveltekit