Obfuscate an Astro site

Astro compiles every island and client bundle through its own Vite pipeline, and AfterPack integrates at the bundler level. @afterpack/astro exists so you don't have to hand-wire vite: { plugins: [...] } yourself.

Everything happens in @afterpack/vite's generateBundle, inside Astro's own Vite pipeline.

Install

$ npm install -D @afterpack/astro

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

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

The default export and the named afterpackAstro export are the same function.

Build

astro build now emits obfuscated output. astro dev is untouched, because the plugin only runs on the build's generateBundle, the hook @afterpack/vite always uses. Astro writes the obfuscated chunks; the originals never reach dist/.

The obfuscated surface is the JavaScript Astro emits: island bundles and client scripts, typically under dist/_astro/. Server-rendered .astro template logic that never becomes client JS is out of scope.

Verify

An astro build runs with the production build mode, so ask for the Protection Map explicitly when you want to inspect one:

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

It writes 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, for example afterpack({ preset: "hard", complexity: 40 }). The type alias AfterpackAstroOptions is AfterpackViteOptions:

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

Directives

Directives are read from your source by the plugin, before minification. Block comments only:

Directives inside .astro component files themselves are not captured. Put the directive in the island's .jsx/.tsx file:

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

Next

• Frameworks: the full matrix.
• Vite: the plugin doing the actual work.
• Protection Map: reading the report.
• Directives: the marker grammar in full.
• Builds & CI: seeds, dev-vs-prod, promoting the same bytes.