2

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

网络请求的照片

我和 Sapper 有同样的问题并解决了这个问题。但我忘记了我是如何修复它的。新的 SvelteKit 设置也有很多不同之处。你们知道如何解决这个问题吗?

提前致谢

4

1 回答 1

1

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

当您使用适配器部署时,无样式内容的闪烁应该在生产模式下消失。

这个股票 SvelteKit 模板不会闪烁无样式的内容。唯一的变化是将适配器从节点适配器更改为静态适配器,以便它可以托管在 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 公告的解释:

现在,我们看到了非捆绑式开发工作流程的兴起,它变得更加简单:开发服务器可以按需提供模块(如果需要,转换为 JavaScript),而不是急切地捆绑您的应用程序,这意味着启动基本上是即时的无论您的应用程序变得多大。

...

这并不是说我们完全放弃了打包工具。优化您的应用程序以进行生产仍然很重要,SvelteKit 使用 Rollup 使您的应用程序尽可能快速和精简(包括将样式提取到静态 .css 文件中)。

于 2021-04-10T09:56:05.750 回答