Svelte 构建初始渲染到 index.html 文件

Question

我决定为我的下一个网站试用 Svelte，这将是一个使用 GitLab 页面托管的静态网站。

我得到了生成 dist/bundle.js 和 dist/bundle.css 的基本编译工作。

问题是我无法上传此 dist 文件夹，因为没有 index.html 文件。

如何让 Svelte/rollup 生成包含初始渲染的 index.html 文件？

另一种选择是创建我自己的 index.html 文件并导入 bundle.js。这对我来说不是一个选项，因为初始渲染现在是在运行时通过 javascript 而不是在编译时生成的，这可能会对 SEO 产生负面影响并阻止没有 javascript 的用户至少看到一些东西。

我也在看做服务器端渲染的 Sapper，据我所知，它在服务器端进行初始渲染。然而，这似乎需要你有一个服务器而不是渲染到一个文件，并且对于一个静态的单页网站来说似乎过于复杂。

Answer 1

我最近开始尝试使用 Svelte，并开始下载 hello world example。
然后我就开始根据需要修改它。
它已经在 public 文件夹中设置了一个 index.html 文件（它被设置为编译到 public 文件夹而不是 dist）。 Svelte / Rollup 不会生成 index.html 文件，它纯粹用于编译和捆绑你的 JS / Svelte 组件。

提供的 index.html 文件只是基本文件：

<!doctype html>
<html>
<head>
    <meta charset='utf8'>
    <meta name='viewport' content='width=device-width'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='favicon.png'>
    <link rel='stylesheet' href='global.css'>
    <link rel='stylesheet' href='bundle.css'>
</head>

<body>
    <script src='bundle.js'></script>
</body>
</html>

main.js 看起来像这样：

import App from './App.svelte';

var app = new App({
  target: document.body
});

export default app;

如果您有兴趣，这是我的第一个 svelte 应用程序 link [source], [build]。

就SEO而言，多年来我到处都听说google现在可以抓取JS，但我并不相信。 JS 驱动的 SPA 永远不会像标准 html 页面那样具有 SEO 功能。

话虽这么说，我目前正在开发一个 SPA，我想要一个好的 SEO。交互部分只是页面的一小部分，所以我将其余部分（文本、图像和内容）直接添加到 index.html 以便搜索引擎抓取它应该没有问题。我只是将 main.js 更改为将应用程序注入 div （带有应用程序 ID）而不是正文。
所以 main.js 看起来像这样：

import App from './App.svelte';

var app = new App({
  target: document.getElementById('app'),
});

export default app;

我还没有对 Sapper 做过任何事情，所以我不能对此发表评论。

希望我的回答能有所帮助。

Answer 2

经过一段时间的挖掘，我发现 Sapper allows you to export（渲染到 html 文件而不需要服务器）。

您可以使用 sapper export 命令执行此操作。如果需要，您还可以轻松切换到快速服务器。

与普通的 svelte 编译和其他一些框架相比，它具有以下优势：

更好的搜索引擎优化
可能更好的可访问性
由于初始页面呈现，页面加载速度更快
JavaScript 不需要查看页面的非动态部分
组件范围javascript在运行时仍然可用
没有运行时和虚拟 DOM - 更快更小 javascript 捆绑包

Svelte 构建初始渲染到 index.html 文件

Svelte build initial render to index.html file

html

javascript

svelte

sapper