AfterPack
Переглянути як Markdown

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

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

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

Усе відбувається в generateBundle пакета @afterpack/vite, усередині власного Vite-конвеєра Astro.

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

$ npm install -D @afterpack/astro
// 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. Astro записує обфусковані чанки; оригінали ніколи не потрапляють у dist/.

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

Перевірка

astro build працює в продакшн-режимі збірки, тож запитуйте Protection Map явно, коли хочете її переглянути:

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

Вона записується в .afterpack/protectionMap.html, внесений у gitignore. Побічний ефект із source map і правила поводження з ним ті самі, що в @afterpack/vite.

entitlements.jslight · complexity 5Open full size
entitlements.js, 54 lines, built at the light preset with a directive around the signature check. Click any token to see what was applied to it.

Параметри

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

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

Директиви

Плагін зчитує директиви з вашого вихідного коду до мініфікації. Лише блокові коментарі:

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

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

Далі