# Обфускація сайту на Astro

@afterpack/astro — тонка інтеграція, яка підключає @afterpack/vite до власного Vite-конвеєра Astro.

Source: https://www.afterpack.dev/uk/docs/frameworks/astro

Astro компілює кожен острів і кожен клієнтський бандл через власний Vite-конвеєр, а AfterPack інтегрується на рівні **бандлера**. `@afterpack/astro` існує для того, щоб вам не довелося вручну прописувати `vite: { plugins: [...] }`.

Усе відбувається в `generateBundle` пакета [`@afterpack/vite`](https://www.afterpack.dev/uk/docs/frameworks/vite), усередині власного Vite-конвеєра Astro.

## Встановлення

```bash
npm install -D @afterpack/astro
```

```js
// astro.config.mjs
import { defineConfig } from "astro/config";
import afterpack from "@afterpack/astro";

export default defineConfig({
  integrations: [afterpack()],
});
```

Експорт за замовчуванням і іменований експорт `afterpackAstro` є однією й тією самою функцією.

## Збірка

Тепер `astro build` видає обфускований результат. `astro dev` не зачіпається, бо плагін працює лише в `generateBundle` збірки, тобто в хуку, який завжди використовує [`@afterpack/vite`](https://www.afterpack.dev/uk/docs/frameworks/vite). Astro записує обфусковані чанки; оригінали ніколи не потрапляють у `dist/`.

Обфускується JavaScript, який видає Astro: бандли островів і клієнтські скрипти, зазвичай у `dist/_astro/`. Серверна логіка шаблонів `.astro`, яка ніколи не стає клієнтським JS, сюди не входить.

## Перевірка

`astro build` працює в [продакшн-режимі збірки](https://www.afterpack.dev/uk/docs/config#build-mode), тож запитуйте [Protection Map](https://www.afterpack.dev/uk/docs/protection-map) явно, коли хочете її переглянути:

```js
integrations: [afterpack({ protectionMap: { enabled: true } })],
```

Вона записується в `.afterpack/protectionMap.html`, внесений у gitignore. Побічний ефект із source map і правила поводження з ним ті самі, що в [`@afterpack/vite`](https://www.afterpack.dev/uk/docs/frameworks/vite#verify).

*(live Protection Map demo embed — see https://www.afterpack.dev/protection-map-demo)*

## Параметри

Кожен [ключ конфігурації](https://www.afterpack.dev/uk/docs/config) можна передати тут в об'єкті параметрів, який дослівно пересилається в [`@afterpack/vite`](https://www.afterpack.dev/uk/docs/frameworks/vite#options), наприклад `afterpack({ preset: "hard", complexity: 40 })`. Псевдонім типу `AfterpackAstroOptions` дорівнює `AfterpackViteOptions`:

```js
integrations: [afterpack({ seed: "git", preset: "medium" })],
```

## Директиви

Плагін зчитує директиви з вашого вихідного коду до мініфікації. [Лише блокові коментарі](https://www.afterpack.dev/uk/docs/directives#writing-one):

Директиви всередині самих файлів компонентів `.astro` не захоплюються. Розміщуйте директиву у файлі `.jsx`/`.tsx` острова:

```jsx
/* @afterpack preset=hard */
export function LicenseGate({ token }) {
  // ...
}
/* @afterpack end */
```

## Далі

- [Фреймворки](https://www.afterpack.dev/uk/docs/frameworks): повна матриця.
- [Vite](https://www.afterpack.dev/uk/docs/frameworks/vite): плагін, який виконує основну роботу.
- [Protection Map](https://www.afterpack.dev/uk/docs/protection-map): як читати звіт.
- [Директиви](https://www.afterpack.dev/uk/docs/directives): повна граматика маркерів.
- [Збірки та CI](https://www.afterpack.dev/uk/docs/builds): сіди, dev проти prod, просування тих самих байтів.