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.

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

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.