AfterPack
Ver como Markdown

Ofusca un sitio de Astro

@afterpack/astro es una integración ligera que conecta @afterpack/vite con el propio pipeline de Vite de Astro.

Astro compila cada isla y cada bundle de cliente a través de su propio pipeline de Vite, y AfterPack se integra a nivel del bundler. @afterpack/astro existe para que no tengas que conectar tú a mano vite: { plugins: [...] }.

Todo ocurre en el generateBundle de @afterpack/vite, dentro del propio pipeline de Vite de Astro.

Instalación

$ npm install -D @afterpack/astro
// astro.config.mjs
import { defineConfig } from "astro/config";
import afterpack from "@afterpack/astro";

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

La exportación por defecto y la exportación con nombre afterpackAstro son la misma función.

Build

astro build emite ahora salida ofuscada. astro dev no se toca, porque el plugin solo se ejecuta en el generateBundle del build, el hook que usa siempre @afterpack/vite. Astro escribe los chunks ofuscados; los originales nunca llegan a dist/.

La superficie ofuscada es el JavaScript que emite Astro: los bundles de islas y los scripts de cliente, normalmente bajo dist/_astro/. La lógica de plantillas .astro renderizada en el servidor que nunca se convierte en JS de cliente queda fuera del alcance.

Verificación

Un astro build se ejecuta en el modo de build de producción, así que pide el Protection Map de forma explícita cuando quieras inspeccionar uno:

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

Se escribe en .afterpack/protectionMap.html, ignorado por git. El efecto secundario sobre los source maps y las reglas para manejarlos son los de @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.

Opciones

Cualquier clave de configuración se puede pasar aquí en el objeto de opciones, que se reenvía tal cual a @afterpack/vite, por ejemplo afterpack({ preset: "hard", complexity: 40 }). El alias de tipo AfterpackAstroOptions es AfterpackViteOptions:

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

Directivas

El plugin lee las directivas de tu código fuente, antes de la minificación. Solo comentarios de bloque:

Las directivas dentro de los propios archivos de componente .astro no se capturan. Pon la directiva en el archivo .jsx/.tsx de la isla:

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

Siguiente

  • Frameworks: la matriz completa.
  • Vite: el plugin que hace el trabajo real.
  • Protection Map: cómo leer el informe.
  • Directivas: la gramática completa de los marcadores.
  • Build y CI: semillas, desarrollo frente a producción, promocionar los mismos bytes.