Obfuscate a SvelteKit app

SvelteKit builds with Vite, and AfterPack integrates at the bundler level, so @afterpack/sveltekit is a thin wrapper: afterpackSveltekit(options) is afterpackVite(options), named for discoverability in a Kit project.

Install

$ 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()],
});

Place it after sveltekit(). The named export is afterpackSveltekit; the package also re-exports afterpackVite and the AfterpackViteOptions type.

Build

vite build now emits obfuscated output. vite dev is untouched, because the plugin only runs on the build's generateBundle, before Vite writes the bundle.

Whatever your adapter emits as JavaScript is obfuscated. Kit runs Vite once for the client and once for the server, and the plugin obfuscates each bundle as it is produced, so adapter-static's prerendered client bundle and a Node or serverless server bundle are both covered. With adapter-static and adapter-node the adapter writes to build/; other adapters write elsewhere.

Pin a seed when the client and server output ship as one release and you want both legs built from the same seed. seed: "git" is the simplest way to guarantee it. Builds & CI covers when pinning is worth it and when a fresh seed per build is the stronger choice.

Verify

afterpackSveltekit({ protectionMap: { enabled: true } });

Writes the combined Protection Map to the gitignored .afterpack/protectionMap.html. The source-map side effect and the handling rules are @afterpack/vite's.

Options

Every configuration key can be passed here as the options object, forwarded verbatim to @afterpack/vite. The type alias AfterpackSveltekitOptions is AfterpackViteOptions.

afterpackSveltekit({ seed: "git", preset: "medium" });

Directives

A /* @afterpack … */ marker inside a .svelte file is not captured. Put the directive in a plain .ts/.js module the route imports instead. src/lib/ is the natural home:

// src/lib/license.ts
/* @afterpack preset=hard */
export function verify(token: string) {
  // ...
}
/* @afterpack end */

Every emitted chunk is obfuscated either way; only the directive needs the plain module.

Next

• Frameworks: the full matrix.
• Vite: the plugin doing the actual work.
• Svelte: plain (non-Kit) Svelte apps.
• Protection Map: reading the report.
• Builds & CI: seeds, dev-vs-prod, promoting the same bytes.