Мета-фреймворк JavaScript Astro был обновлен, и теперь он может похвастаться набором новых функций.

AstroJS — фантастический инструмент на основе JavaScript, используемый для создания сверхбыстрых статических веб-сайтов. Он позволяет создавать веб-сайты с использованием нескольких фреймворков JavaScript, таких как React, Vue и Svelte. Astro 2.5 предлагает совершенно новый набор функций, некоторые из которых будут рассмотрены здесь.

1. Сборы данных

Astro 2.5 теперь поддерживает хранение JSON и YAML в коллекциях. Новый тип: свойство «данные» включает эту функциональность. Чтобы продемонстрировать это, создайте коллекцию данных «писатели» в папке src/content, где JSON или YAML файлы можно добавлять.

Затем настройте коллекции в src/content/config.ts, используя определитьколлекцию и г коммунальные услуги от астро: содержание модуль и установка типа данных.

Импортировать { г, определитьколлекцию } от"астро: содержание";
константа писатели = определитьCollection({
тип: "данные",
схема: г.объект({ имя: з.нить() }),
});
instagram viewer

Наконец, экспортируйте объект коллекции, чтобы зарегистрировать свои коллекции.

экспортконстанта коллекции = {писатели:писатели}

2. Минификация HTML

В Astro 2.5 представлена ​​опция CompressHTML, которая удаляет все пробелы (и разрывы строк) из вашего HTML. Компоненты сжимаются компилятором Astro только один раз, а затем во время сборки. Это сделано для снижения затрат на производительность.

Включить эту опцию в вашем проекте очень просто. Просто добавьте следующие строки в файл конфигурации. Минимизация HTML работает только с компонентами, написанными в формате файла .astro.

экспортпо умолчаниюопределить конфигурацию({сжиматьHTML:истинный})

3. Параллельный рендеринг

Параллельный рендеринг компонентов — долгожданная функция Astro. В случаях, когда дочерние компоненты в разных поддеревьях извлекают данные, Astro 2.5 сокращает время загрузки за счет параллельной выборки данных.

Это позволяет визуализировать компонент, находящийся ниже по дереву, не блокируя его компонентом извлечения данных, расположенным выше по дереву. На данный момент параллельный рендеринг не работает должным образом с массив.карта асинхронные фрагменты.

Astro 2.5 также предлагает совершенно новый набор экспериментальных функций, которые описаны ниже.

4. Гибридный рендеринг

Astro 2.5 теперь позволяет вам определить новый параметр вывода сервера в вашем файле конфигурации, который переопределяет поведение SSR перед рендерингом по умолчанию.

Чтобы воспользоваться преимуществами гибридного рендеринга, установите гибридныйвыход на true в экспериментальном разделе вашей конфигурации и добавьте адаптер.

Это приведет к предварительному отображению всего вашего сайта по умолчанию, но вы можете отказаться от этого поведения, установив предварительный рендеринг экспорт любого маршрута или страницы в false:

экспортконстанта предварительный рендеринг = ЛОЖЬ;

5. Пользовательские директивы клиента

Astro 2.5 представляет API addClientDirective для настраиваемого управления гидратацией компонентов на стороне клиента с использованием пользовательских клиент:* директивы.

Чтобы использовать эту функцию, включите экспериментальный.customClientDirectives в файле конфигурации и сведите точки входа директивы к минимуму, чтобы избежать любого негативного влияния на гидратацию компонентов.

Функция типа Клиентская директива должны быть экспортированы из вашего файла клиентской директивы. Например, следующий код увлажняет компонент при первом щелчке по окну.

Импортировать {Директива клиента} от"астро";
константа clickDirective: ClientDirective = (загрузка, опц, эл) => {
окно.addEventListener(
"щелкнуть",
асинхронный () => {
константа гидрат = Ждите нагрузка();
Ждите гидрат();
 },
 { один раз: истинный }
 );
};
экспортпо умолчанию щелкнитеДиректива;

Сейчас клиент: нажмите могут использоваться в ваших компонентах с полной поддержкой типов.

Как установить Астро

Astro предоставляет интерфейс командной строки (CLI), называемый создать астро чтобы вы начали. Тебе нужно иметь На вашем компьютере установлены NodeJS 16+ и npm.

нпм создать астро@последний

Это создаст новый проект Astro с нуля. Следуйте инструкциям на экране, чтобы настроить все (если вы не уверены, что выбрать, просто выберите рекомендуемые варианты). Следующий, CD в папку проекта, затем запустите:

нпм запустить разработчик

Вы можете добавить такие фреймворки, как React, используя астро доп. Если все установлено правильно, вы можете открыть локальный: 3000 на вашем компьютере, и вы должны увидеть сообщение «Добро пожаловать в Astro».

Если вам не нравится NPM, вы можете выбрать другой Менеджеры пакетов JavaScript как пряжа и PNPM.

Улучшение опыта разработчиков с помощью Astro

Универсальные фреймворки, такие как Astro, максимально упрощают разработку быстрых веб-сайтов. Это фантастика, независимая от пользовательского интерфейса природа означает, что вы можете без проблем работать с любой популярной инфраструктурой JavaScript по вашему выбору.