Svelte создает начальный рендер в файл index.html

Я решил попробовать Svelte для своего следующего веб-сайта, и это будет статический веб-сайт, размещенный на страницах GitLab.

Я получил базовую компиляцию, которая генерирует dist/bundle.js и dist/bundle.css.

Проблема в том, что я не могу загрузить эту dist папку, поскольку там нет index.html файла.

Как заставить Svelte / rollup сгенерировать index.html файл, содержащий начальную визуализацию?

Другой вариант - создать свой собственный index.html файл и импортировать bundle.js. Для меня это не вариант, потому что начальный рендеринг теперь создается во время выполнения с помощью javascript, а не во время компиляции, что потенциально оказывает негативное влияние на SEO и не позволяет пользователям без javascript хотя бы что-то увидеть.

Я также смотрел на Sapper, который выполняет рендеринг на стороне сервера, который, насколько я знаю, выполняет начальный рендеринг на стороне сервера. Однако это, похоже, требует наличия сервера вместо рендеринга в файл и кажется слишком сложным для статического одностраничного веб-сайта.


javascript html svelte sapper
person David Callanan    schedule 26.07.2019    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Покопавшись некоторое время, я обнаружил, что Sapper позволяет export (рендеринг в файлы html вместо использования сервера).

Вы можете сделать это с помощью команды sapper export. При необходимости вы также можете легко переключиться на экспресс-сервер.

Это имеет следующие преимущества по сравнению с обычной компиляцией Svelte и некоторыми другими фреймворками:

  • Лучшее SEO
  • Возможно лучшая доступность
  • Более быстрая загрузка страницы из-за начального рендеринга страницы
  • JavaScript не требуется для просмотра нединамических разделов вашей страницы
  • Компонентный JavaScript по-прежнему доступен во время выполнения
  • Нет среды выполнения и виртуальной DOM - более быстрый и компактный пакет javascript
person David Callanan    schedule 27.07.2019
comment
Похоже, что sapper был заменен SvelteKit (теми же людьми): kit.svelte.dev - person BallpointBen; 27.04.2021

arrow_upward
1
arrow_downward

Недавно я начал экспериментировать с 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;

Вот ссылка [источник], [build] в мое первое стройное приложение, если вам интересно.

Что касается SEO, я много лет слышу повсюду, что Google теперь может сканировать JS, но я не уверен. SPA, управляемый JS, никогда не будет иметь такого сока SEO, как стандартная html-страница.

При этом я в настоящее время работаю над SPA со стройной структурой, для которой мне нужен хороший SEO. Интерактивная часть - это лишь небольшая часть страницы, поэтому я добавляю остальное (текст, изображения и прочее) непосредственно в index.html, чтобы у поисковых систем не было проблем с его сканированием. Я просто меняю main.js, чтобы вставить приложение в div (с идентификатором приложения), а не в тело.
Итак, main.js выглядит так:

import App from './App.svelte';

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

export default app;

Я еще ничего не делал с Sapper, поэтому не могу это комментировать.

Надеюсь, мой ответ в чем-то поможет.

person 2pha    schedule 26.07.2019
comment
Я действительно начал с этого примера hello world, и именно тогда я решил задать этот вопрос. Если я помещу статический контент в index.html, это лишит меня цели использовать svelte, потому что мой веб-сайт в основном статичен, и единственными динамическими частями, возможно, будет гамбургер-меню. Поэтому я намерен использовать Svelte в большей степени как компилятор html, чем компилятор js из-за отсутствия у меня динамических частей, подобных next.js, и реагировать на статические и некоторые другие (у которых есть проблема, заключающаяся в том, что либо не разрешается какой-либо клиентский javascript внутри компонентов или требуют всего времени выполнения реакции, чего я пытаюсь избежать, используя Svelte) - person David Callanan; 27.07.2019
comment
Тогда мне кажется, что вам вообще не нужен svelte (или какой-либо JS-фреймворк). Меню можно создать с минимальным количеством CSS и, возможно, небольшим количеством JS. Возможно, вам больше подойдет генератор статических сайтов. Я лично пользуюсь услугами мастера по металлу для ведения своего блога. - person 2pha; 27.07.2019
comment
Svelte позволяет мне разделять на компоненты с ограниченными стилями и javascript, и мне сложно без этого разрабатывать. Я мог бы использовать другие движки шаблонов, но я не могу найти ни одного, который бы поддерживал css и js. Я также предпочитаю придерживаться Svelte, чтобы использовать его в разных проектах, независимо от того, хочу ли я создать статический веб-сайт или нет. Svelte уже создает статический веб-сайт, если вы не используете что-то вроде sapper, но требует, чтобы javascript сгенерировал начальный рендеринг вместо создания html-файла с начальным рендером. Я ожидал, что это будет простая задача. - person David Callanan; 27.07.2019