SvelteKit збирається через Vite, а AfterPack інтегрується на рівні бандлера, тож @afterpack/sveltekit є тонкою обгорткою: afterpackSveltekit(options) — це і є afterpackVite(options), лише з назвою, яку легко знайти в проєкті Kit.
Встановлення
$ npm install -D @afterpack/sveltekit// vite.config.ts
import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import { afterpackSveltekit } from "@afterpack/sveltekit";
export default defineConfig({
plugins: [sveltekit(), afterpackSveltekit()],
});Розмістіть його після sveltekit(). Іменований експорт — afterpackSveltekit; пакет також реекспортує afterpackVite і тип AfterpackViteOptions.
Збірка
Тепер vite build видає обфускований результат. vite dev не зачіпається, бо плагін працює лише на етапі generateBundle збірки, до того як Vite запише бандл.
Обфускується весь JavaScript, який видає ваш адаптер. Kit запускає Vite один раз для клієнта й один раз для сервера, а плагін обфускує кожен бандл у момент його створення, тож покрито і пререндерений клієнтський бандл adapter-static, і серверний бандл для Node чи serverless. З adapter-static та adapter-node адаптер пише в build/; інші адаптери пишуть в інші місця.
Закріпіть seed, коли клієнтський і серверний результат виходять одним релізом і ви хочете, щоб обидві частини збиралися з одного сіду. seed: "git" є найпростішим способом це гарантувати. Збірки та CI пояснює, коли закріплення варте того, а коли новий сід на кожну збірку є сильнішим вибором.
Перевірка
afterpackSveltekit({ protectionMap: { enabled: true } });Записує об'єднану Protection Map у внесений до gitignore .afterpack/protectionMap.html. Побічний ефект для source map і правила поводження з ним ті самі, що й у @afterpack/vite.
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. Псевдонім типу AfterpackSveltekitOptions дорівнює AfterpackViteOptions.
afterpackSveltekit({ seed: "git", preset: "medium" });Директиви
Маркер /* @afterpack … */ усередині файлу .svelte не зчитується. Натомість розмістіть директиву у звичайному модулі .ts/.js, який імпортує маршрут. Природне місце для нього — src/lib/:
// src/lib/license.ts
/* @afterpack preset=hard */
export function verify(token: string) {
// ...
}
/* @afterpack end */Кожен виданий чанк обфускується в будь-якому разі; звичайний модуль потрібен лише для директиви.
Далі
- Фреймворки: повна таблиця.
- Vite: плагін, який виконує всю роботу.
- Svelte: звичайні застосунки Svelte (без Kit).
- Protection Map: як читати звіт.
- Збірки та CI: сіди, dev проти продакшну, просування тих самих байтів.