javascript - 将初始渲染构建为index.html文件

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

我掌握了基本的编译工作，可以生成dist/bundle.js和dist/bundle.css。

问题在于，由于没有dist文件，我无法上传此index.html文件夹。

如何获取Svelte /汇总来生成一个包含初始渲染的index.html文件？

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

我还在看Sapper，它负责服务器端渲染，据我所知，它可以进行服务器端的初始渲染。但是，这似乎要求您拥有服务器而不是呈现到文件，并且对于静态单页网站而言似乎过于复杂。

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

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

import App from './App.svelte';

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

export default app;

main.js看起来像这样：

import App from './App.svelte';

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

export default app;

如果您有兴趣，请点击[source]，[build]到我的第一个精简应用程序。

就SEO而言，多年以来，我一直在各地听到google可以抓取JS的信息，但我对此深信不疑。 JS驱动的SPA绝对不会像标准html页面那样具有SEO汁。

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

{{1}}

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

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

经过一段时间的探索，我发现Sapper允许您export（渲染为html文件而不需要服务器）。

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

与普通的精简编译和某些其他框架相比，它具有以下优点：

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

将初始渲染构建为index.html文件

2 个答案: