Ofusca una aplicación SvelteKit

SvelteKit compila con Vite, y AfterPack se integra a nivel de bundler, así que @afterpack/sveltekit es un envoltorio fino: afterpackSveltekit(options) es afterpackVite(options), con un nombre pensado para encontrarlo fácilmente en un proyecto Kit.

Instalación

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

Colócalo después de sveltekit(). La exportación con nombre es afterpackSveltekit; el paquete también reexporta afterpackVite y el tipo AfterpackViteOptions.

Build

vite build ahora emite salida ofuscada. vite dev no se toca, porque el plugin solo se ejecuta en el generateBundle del build, antes de que Vite escriba el bundle.

Se ofusca todo el JavaScript que emita tu adaptador. Kit ejecuta Vite una vez para el cliente y otra para el servidor, y el plugin ofusca cada bundle a medida que se produce, así que quedan cubiertos tanto el bundle de cliente prerrenderizado de adapter-static como un bundle de servidor Node o serverless. Con adapter-static y adapter-node el adaptador escribe en build/; otros adaptadores escriben en otro sitio.

Fija una seed cuando la salida del cliente y la del servidor se publiquen como una sola versión y quieras que ambas partes se compilen con la misma semilla. seed: "git" es la forma más sencilla de garantizarlo. Builds y CI explica cuándo compensa fijarla y cuándo una semilla nueva en cada build es la opción más fuerte.

Verificación

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

Escribe el Protection Map combinado en .afterpack/protectionMap.html, ignorado por git. El efecto secundario sobre los source maps y las reglas de manejo son los de @afterpack/vite.

Para comprobar un despliegue con adapter-static o adapter-node, ejecuta npx afterpack@latest verify build antes de subirlo. El adapter copia la salida de cliente protegida de .svelte-kit/output/client a build/, y verify comprueba la copia contra el recibo de protección de esa salida y nombra cualquier archivo que haya cambiado.

Opciones

Cualquier clave de configuración puede pasarse aquí en el objeto de opciones, que se reenvía tal cual a @afterpack/vite. El alias de tipo AfterpackSveltekitOptions es AfterpackViteOptions.

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

Directivas

Un marcador /* @afterpack … */ dentro de un archivo .svelte no se captura. Pon la directiva en un módulo .ts/.js normal que importe la ruta. src/lib/ es su lugar natural:

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

Cada chunk emitido se ofusca de todos modos; solo la directiva necesita el módulo normal.

Siguiente

• Frameworks: la matriz completa.
• Vite: el plugin que hace el trabajo real.
• Svelte: aplicaciones Svelte sin Kit.
• Protection Map: cómo leer el informe.
• Builds y CI: semillas, desarrollo frente a producción, promocionar los mismos bytes.