причина
За это время официальный сайт нашей компании будет обновлен. Поскольку нам нужна поддержка браузеров выше IE9, мы использовали ejs для разработки раньше, но обнаружили, что ejs не поддерживает многие методы написания, а повторное использование некоторых шаблонов неудобно. На этот раз я планирую найти новый фреймворк для разработки. Так что коллега порекомендовал мне Svelte.Узнав о нем, я сразу же засадился.Он очень подходил для развития этой сцены.На этот раз было решено, что им будет разработка официального сайта.
Преимущество
меньше кода
Метод написания в Svelte разработан так, чтобы быть более удобным для пользователя и требует меньше кода при разработке, чем другие фреймворки. На официальном сайте Svelte приводят пример при объявлении состояния компонента:
Вот код для React
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
}
Вот код для Svelte
let count = 0;
function increment() {
count += 1;
}
По сравнению с React он намного проще, и похоже на JavaScript, который мы обычно пишем, который удобнее читать.
Нет виртуального дома
Мы все знаем, что Vue и React используют Virtual Dom для обновления Dom. Виртуальный дом превратит страничный дом в данные с древовидной структурой и сохранит их в памяти.Каждый раз, когда состояние в компоненте изменяется, будет создан новый виртуальный дом для сравнения со старым виртуальным домом для создания исправления, и он будет перейти к обновлению узла реального дома. Конечно, Виртуальный Дом во фреймворке намного сложнее, чем я сказал.
Но Svelte модифицировал и обновлял узлы Dom, используя чистую реализацию JavaScript без каких-либо зависимостей от фреймворка. Поскольку Svelte не зависит от виртуального дома, работа по инициализации и обновлению требует гораздо меньше усилий, что ускоряет запуск и работу страницы.
Меньший размер упаковки
Подобно тому, как Vue и React являются средами выполнения, упакованный код будет содержать собственный код времени выполнения. Подход Svelte заключается в сокращении кода среды выполнения во время компиляции и минимизации кода среды выполнения, включенного в упакованный код. И, как описано выше, он не основан на Virtual Dom, поэтому объем упакованного кода Svelte намного меньше, чем у других фреймворков.
Отзывчивый
Svelte также реализует реакцию на состояние, как Vue для нас, где компоненты обновляются, когда состояние изменяет состояние. Это позволяет нам лучше инкапсулировать компоненты. И это написано так же, как обычное объявление переменной, но Svelte автоматически вставит реактивный код для вас во время компиляции.
count += 1;
Когда Svelte компилируется, он автоматически добавляет реактивный код при компиляции.
count += 1; $$invalidate('count', count);
Зачем использовать Svelte
Virtual Dom может обеспечить очень хорошее повышение производительности при сложном взаимодействии и рендеринге, а также может уменьшить количество перекомпоновок и перерисовок для рендеринга страницы.
Но обычно официальный сайт представляет собой статическую веб-страницу, которая используется для того, чтобы показать людям, как компания развивает свой бизнес. Обычно это не какие-то очень сложные взаимодействия и рендеры, а больше картинок и текстового контента.
Тем не менее, использование Virtual Dom для простого взаимодействия не может принести хороших результатов, потому что простое взаимодействие не обязательно для обновления Dom путем изменения узла Dom, а нужно пройти очень сложную работу Diff в Virtual Dom, так что это не очень нужно. , Виртуальный дом.
Тогда размер кода после упаковки с помощью Svelte будет намного меньше, что значительно улучшит SEO и пользовательский опыт.
И я обнаружил, что Vite также поддерживает Svelte, а разработка с помощью Vite может удвоить эффективность разработки.
Процесс реализации пререндеринга
Но я обнаружил, что Svelte поддерживает только рендеринг JS и рендеринг SSR, потому что содержимое страниц, к которым обращаются чисто статические страницы нашего официального сайта, каждый раз фиксируется, поэтому нет необходимости использовать SSR, но это не может быть рендеринг JS, поскольку официальный веб-сайт очень ориентирован на SEO, контент веб-сайта должен сканироваться поисковым роботом SEO.Когда страница отображается с помощью JS, поисковый робот SEO не понимает JavaScript и не будет сканировать нашу страницу.
Тогда как это сделать, нам нужно сначала развернуть главную страницу на сервере локально, чтобы отрендерить все заново, что также называется предварительно отрендеренным. Когда пользователь открывает страницу, сразу показывается хороший HTML-контент.
Реализация использует инструмент упаковки Vite, но если вы используете Rollup или Webpack, идея та же.
блок-схема
- Первый шаг сборки
Скомпилируйте версию рендеринга JS, чтобы получить скомпилированную страницу и необходимые ресурсы, у меня они экспортированы в папку dist, pageA и pageB — это две страницы соответственно, ресурсы — это требуемые папки ресурсов ссылки на упакованной странице.
- Второй шаг vite build --ssr
Упакуйте код страницы SSR.После компиляции я экспортирую их в папку .ssr и получаю js-файл, который может получить функцию рендеринга каждой страницы.По сути, pageA.js и pageB.js - это две страницы, которые можно найти в функции рендеринга js, используемой сервером, при вызове функции рендеринга можно получить html-строку рендеринга страницы.
- Выполнение третьего шага /script/generate.js
Это js-скрипт, который я написал сам, на самом деле процесс очень простой
Первое, что нужно сказать заранее, это то, что я буду писать такой комментарий в html-теле каждой страницы перед шагом 1, чтобы заменить html-строку после вызова функции рендеринга.
<body>
<div id="app">
<!-- 要被渲染后的html替换的暂位符 -->
<!-- ssr-body -->
</div>
<body>
Это поток выполнения этого скрипта
-
Четвертый шаг — использовать gulp для сжатия html.
-
Компиляция завершена, окончательные результаты находятся в папке /dist.
GitHub
Это шаблон проекта, который я использовал для этой разработки.
Заинтересованные студенты также могут перейти непосредственно к проекту GitHub, чтобы увидеть код реализации, который на самом деле очень прост.
Суммировать
Я до сих пор помню, как Ю Юйси упомянул в Zhihu Live, что не упоминать структуру сравнения сцен — это хулиганство.
Svelte стоит попробовать при разработке некоторых статических страниц или сценариев без множества сложных взаимодействий.
Однако, если это проект среднего или крупного размера, он все же может быть более выгодным для таких фреймворков, как Vue и React.
Надеюсь, вы сможете выбрать наиболее подходящий фреймворк для своего проекта.