Ofusca una app de Nuxt

Nuxt 3 empaqueta con Vite, y AfterPack se integra a nivel de bundler, así que @afterpack/nuxt es un módulo de Nuxt muy ligero: llama a addVitePlugin para registrar @afterpack/vite en la configuración de Vite de Nuxt, y el bundle de cliente se ofusca en el generateBundle de Vite, antes de que se escriba el build.

Los proyectos de Nuxt 2 compilan con webpack. En ellos usa @afterpack/webpack.

Instalación

$ npm install -D @afterpack/nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@afterpack/nuxt"],
  afterpack: {
    seed: "git",
  },
});

Las opciones van bajo la clave de configuración afterpack.

Build

nuxt generate (estático) o nuxt build (SSR) emiten ahora salida ofuscada. nuxt dev no se toca, porque el plugin solo se ejecuta en el generateBundle de Vite. Se registra una instancia nueva del plugin @afterpack/vite por cada entorno de Vite (cliente y servidor), y cada una ofusca su propio bundle antes de que Vite lo escriba.

Estático frente a servidor

Estático / prerenderizado (nuxt generate): se ofusca el bundle de cliente prerenderizado en .output/public/_nuxt/. Es la forma recomendada de publicar código de cliente protegido.
Servidor (SSR): el bundle de cliente se ofusca de la misma manera; el bundle del servidor Nitro es tu propio artefacto de despliegue.

Fija seed: "git" cuando quieras que las partes de cliente de una misma versión se compilen con la misma semilla, o cuando un build tenga que ser reproducible byte a byte (aciertos de caché, snapshots de referencia). Builds y CI explica el equilibrio. Nuxt también genera un buildId nuevo en cada build.

Verificación

export default defineNuxtConfig({
  modules: ["@afterpack/nuxt"],
  afterpack: { 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 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.

Para comprobar un despliegue, ejecuta npx afterpack@latest verify .output/public antes de subirlo. Nitro copia ahí el build de cliente protegido, y verify comprueba la copia contra el recibo de protección del build y nombra cualquier archivo que haya cambiado.

Opciones

Cualquier clave de configuración puede pasarse bajo la clave de configuración afterpack, que se reenvía tal cual a @afterpack/vite, por ejemplo afterpack: { preset: "hard", complexity: 40 }. El alias de tipo AfterpackNuxtOptions es AfterpackViteOptions.

Directivas

Las directivas son una función Pro. En un build Free, una directiva que aumenta la protección detiene el build con DIAG_PRO_DIRECTIVE_REQUIRES_KEY.

Un marcador /* @afterpack … */ dentro de un archivo .vue no se captura. Pon la directiva en un módulo .ts/.js normal (un composable, un archivo de utils/) que el componente importe.

Frameworks: la matriz completa.
Vite: el plugin que hace el trabajo real.
Vue: una app de Vue 3 + Vite sin más.
Protection Map: cómo leer el informe.
Builds y CI: semillas, desarrollo frente a producción y promocionar los mismos bytes.