5

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

我得到了生成dist/bundle.js和dist/bundle.css.

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

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

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

我还在研究 Sapper，它进行服务器端渲染，据我所知，它在服务器端进行初始渲染。但是，这似乎需要您拥有服务器而不是渲染到文件，并且对于静态单页网站来说似乎过于复杂。

4

2 回答 2

10

经过一段时间的挖掘，我发现Sapper允许您导出（呈现为 html 文件而不需要服务器）。

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

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

  • 更好的搜索引擎优化
  • 可能更好的可访问性
  • 由于初始页面渲染，页面加载速度更快
  • 查看页面的非动态部分不需要 JavaScript
  • 组件范围的 javascript 在运行时仍然可用
  • 没有运行时和虚拟 DOM - 更快更小的 javascript 包
于 2019-07-27T16:20:46.767 回答
1

我最近开始尝试使用 svelte，并从下载hello world 示例开始。
然后我就开始根据我的需要改变它。
它已经在 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;

如果您有兴趣 ，这是我的第一个苗条应用程序的链接[source]，[build] 。

就 SEO 而言，多年来我一直听说 google 现在可以抓取 JS，但我并不相信。一个 JS 驱动的 SPA 永远不会像标准的 html 页面那样拥有 SEO 汁液。

话虽如此，我目前正在开发一个我想要好的 SEO 的 SPA。交互部分只是页面的一小部分，所以我将其余部分（文本、图像和其他内容）直接添加到 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 做过任何事情，所以我不能对此发表评论。

我希望我的回答能在某种程度上有所帮助。

于 2019-07-26T23:17:18.710 回答