堆栈内存溢出
  繁体   English   中英

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

[英]Svelte build initial render to index.html file

 原文  2019-07-26 17:57:27  1   2    javascript/ html/ svelte/ sapper

问题描述

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

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

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

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

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

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

2 个解决方案

解决方案1
 4 已采纳  2019-07-27 16:20:46

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

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

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

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

解决方案2
 1  2019-07-26 23:17:18

我最近开始尝试svelte，并开始下载hello world示例 。
然后，我开始根据自己的需要对其进行更改。
它已经在公用文件夹中设置了index.html文件（已设置为编译为公用文件夹而不是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;

如果您有兴趣，这是我的第一个精简应用程序的链接[源] [构建] 。

就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做任何事情，所以我无法对此发表评论。

希望我的回答对您有所帮助。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使 index.html 出现在苗条 npm 运行构建中 如何在 Svelte 中重命名 index.html 文件？ gatsby-cli建立后没有index.html文件吗？ rollup.js 苗条包未在 index.html 中激活 NodeJS-尝试呈现index.ejs文件，但仍然仅显示我的公用文件夹中的服务器index.html Angular 构建 index.html 不起作用 Webpack 构建操纵索引。html Webpack 构建后未加载 index.html 中的应用程序，build.js 文件中没有代码 在初始index.html页面加载时触发RouteChangeStart事件 无法从angular2的查看文件夹中呈现index.html文件
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM