Мета рамката на 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, като използвате defineCollection и z комунални услуги от астро: съдържание модул и задаване на типа на данни.

импортиране {z, defineCollection} от"astro: съдържание";
конст писатели = defineCollection({
Тип: "данни",
схема: z.обект({ име: z.низ() }),
});

Накрая експортирайте обекта на колекцията, за да регистрирате вашите колекции.

instagram viewer 
износконст колекции = {писатели:писатели}

2. Минимизиране на HTML

Astro 2.5 въвежда опцията за компресиране на HTML, която премахва всички бели интервали (и прекъсвания на редове) от вашия HTML. Компонентите се компресират само веднъж от Astro компилатора и след това по време на изграждането. Това се прави, за да се намалят разходите за изпълнение.

Активирането на тази опция във вашия проект е лесно. Просто добавете следните редове към вашия конфигурационен файл. HTML Minification работи само с компоненти, написани във файлов формат .astro.

износпо подразбиранеdefineConfig({компресиране на HTML:вярно})

3. Паралелно изобразяване

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

Това позволява компонент по-надолу в дървото да бъде изобразен, без да бъде блокиран от компонент за извличане на данни по-нагоре в дървото. В момента паралелното изобразяване не работи правилно с array.map асинхронни фрагменти.

Astro 2.5 също носи изцяло нов набор от експериментални функции, които са разгледани по-долу.

4. Хибридно изобразяване

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

За да се възползвате от хибридното изобразяване, задайте hybridOutput на true в експерименталния раздел на вашата конфигурация и добавете адаптер.

Това ще изобрази предварително целия ви сайт по подразбиране, но можете да се откажете от това поведение, като зададете предварително изобразяване експортиране на всеки маршрут или страница към false:

износконст предварително изобразяване = невярно;

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

Astro 2.5 въвежда addClientDirective API за персонализиран контрол на хидратацията на компоненти от страна на клиента, използвайки персонализирани клиент:* директиви.

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

Функция от тип ClientDirective трябва да се експортира от файла с директиви на клиента. Например, следният код хидратира компонента при първото щракване върху прозореца.

импортиране { ClientDirective } от"астро";
конст clickDirective: ClientDirective = (товар, опции, ел) => {
прозорец.addEventListener(
"клик",
асинхронен () => {
конст хидратира = изчакайте натоварване ();
изчакайте хидратирам();
 },
 { веднъж: вярно }
 );
};
износпо подразбиране clickDirective;

Сега клиент: клик може да се използва във вашите компоненти с пълна поддръжка на типове.

Как да инсталирате Astro

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

npm създава астро@последен

Това ще създаде нов Astro проект от нулата. Следвайте инструкциите на екрана, за да настроите нещата (ако не сте сигурни какво да изберете, просто отидете с препоръчаните опции). Следващия, cd в папката на проекта, след което изпълнете:

npm стартиране dev

Можете да добавяте рамки като React, като използвате астро добавка. Ако всичко е инсталирано правилно, можете да отворите локален хост: 3000 на вашата машина и трябва да видите съобщение „Добре дошли в Astro“.

Ако не харесвате NPM, можете да изберете друг Мениджъри на пакети на JavaScript като Yarn и PNPM.

Подобряване на изживяването на разработчиците с Astro

Рамките „всичко в едно“ като Astro правят разработването на бързи уебсайтове възможно най-гладко. Неговият фантастичен, UI-агностичен характер означава, че можете да работите с всяка популярна JavaScript рамка по ваш избор без проблеми.