# Ofusca un build de Vite

@afterpack/vite ofusca tu build en generateBundle, antes de que Vite lo escriba. Es la integración de referencia que envuelven todos los demás paquetes de la familia Vite.

Source: https://www.afterpack.dev/es/docs/frameworks/vite

`@afterpack/vite` es la integración de referencia. [Astro](https://www.afterpack.dev/es/docs/frameworks/astro), [Svelte](https://www.afterpack.dev/es/docs/frameworks/svelte), [SvelteKit](https://www.afterpack.dev/es/docs/frameworks/sveltekit), [Vue](https://www.afterpack.dev/es/docs/frameworks/vue) y [Nuxt](https://www.afterpack.dev/es/docs/frameworks/nuxt) la envuelven, así que lo que describe esta página también se aplica a esos paquetes.

Lee las [directivas `@afterpack`](https://www.afterpack.dev/es/docs/directives) de tu código fuente y después ejecuta el motor en `generateBundle`, con el bundle terminado en memoria y antes de que Vite escriba nada.

## Instalación

```bash
npm install -D @afterpack/vite
```

```ts
// vite.config.ts
import { defineConfig } from "vite";
import { afterpackVite } from "@afterpack/vite";

export default defineConfig({
  plugins: [afterpackVite()],
});
```

## Build

Esa es toda la configuración. `npm run build` ahora emite salida ofuscada; `vite dev` no se toca, porque el plugin solo actúa en el `generateBundle` de un build. Vite escribe los chunks ofuscados y nunca los originales, y una ofuscación fallida deja `outDir` como estaba.

Lo que ofusca es lo que Vite compiló: cada chunk del bundle de salida. Los archivos que Vite copia tal cual desde `publicDir` al directorio de salida no se compilan, no están en el bundle y no se tocan. Haz pasar por el bundler todo lo que necesite protección.

El plugin escribe:

- [`protectionMap.html`](https://www.afterpack.dev/es/docs/protection-map): un único mapa combinado para el build, que se escribe en `.afterpack/`, ignorado por git, en la raíz de tu proyecto cuando el mapa está activado. Está desactivado por defecto; consulta [Verificación](#verify). Incrusta tu código fuente original. Nunca dejes que acabe en un directorio servido.
- `foo.js.map`: el [source map](https://www.afterpack.dev/es/docs/config#sourceMap-enabled), cuando los mapas están activados. Cuando están desactivados, que es el valor por defecto en producción, la entrada de mapa del propio Vite se descarta en lugar de escribirse junto al chunk ofuscado.

Aquí no hay `foo.backup.<hash>.js`. Los bytes ofuscados vuelven al bundle, así que no existe ningún archivo emitido junto al que colocar una copia de seguridad, y [`build.backup: true`](https://www.afterpack.dev/es/docs/config#build-backup) emite un aviso en lugar de escribirla.

`.afterpack/` lleva su propio `.gitignore`, así que el plugin nunca edita el tuyo. Avisa si un artefacto acaba bajo una ruta servida.

## Verificación

El [Protection Map](https://www.afterpack.dev/es/docs/protection-map) se escribe por defecto cuando Vite emite un source map y el build no se ejecuta en CI (`CI=true` o `CI=1`); un [build de producción](https://www.afterpack.dev/es/docs/config#build-mode) no lo desactiva. Vite no emite ningún source map a menos que se configure `build.sourcemap`, así que en un build normal el mapa está desactivado por defecto. Pídelo explícitamente cuando quieras inspeccionar uno:

```ts
afterpackVite({ protectionMap: { enabled: true } });
```

Con `build.sourcemap` sin establecer, esto también activa los source maps del propio Vite, para que el mapa pueda mostrar tu código fuente original. Sin un mapa localizable, el plugin no tiene de dónde mostrar el código fuente original y lo indica.

El informe se escribe en `.afterpack/protectionMap.html`. Contiene todo tu código fuente. Nunca lo confirmes en git ni lo sirvas, y revísalo solo en local.

*(live Protection Map demo embed — see https://www.afterpack.dev/protection-map-demo)*

> **Nunca publiques source maps en producción**
>
> Un archivo `.map` lleva hasta tu código fuente original. Nunca despliegues uno.

## Opciones

Cualquier [clave de configuración](https://www.afterpack.dev/es/docs/config) puede pasarse aquí en el objeto de opciones, por ejemplo `afterpackVite({ preset: "hard", complexity: 40 })`. Todas son opcionales. La exportación con nombre es `afterpackVite`.

`preset` y `complexity` establecen cosas distintas. Un [preset](https://www.afterpack.dev/es/docs/presets) es un conjunto: establece a la vez el objetivo de complejidad, el multiplicador total de salida y el [presupuesto de inflación](https://www.afterpack.dev/es/docs/config#inflation-max). `complexity` es un solo número dentro de ese conjunto:

```ts
afterpackVite({ preset: "hard", complexity: 40 }); // hard's size limits, target 40
```

## Directivas

Las directivas son una función [Pro](https://www.afterpack.dev/es/docs/pro). En un [build Free](https://www.afterpack.dev/es/docs/directives#free-builds), una directiva que aumenta la protección detiene el build con `DIAG_PRO_DIRECTIVE_REQUIRES_KEY`.

El plugin lee las directivas de tu código fuente, antes de que cualquier minificador elimine los comentarios. La [gramática](https://www.afterpack.dev/es/docs/directives#writing-one) admite solo comentarios de bloque:

```ts
/* @afterpack preset=hard */
function verifyLicense(token) {
  // ...
}
/* @afterpack end */
```

Los comentarios de línea `// @afterpack …` no se analizan y se notifican como [diagnósticos](https://www.afterpack.dev/es/docs/diagnostics).

Todas las claves que puede establecer una directiva están en la página de [Directivas](https://www.afterpack.dev/es/docs/directives#what-you-can-set).

La captura omite `node_modules` y los archivos que no son JS/TS. Una directiva dentro de un componente de archivo único `.vue` o `.svelte` no se captura. Ponla en un módulo `.ts`/`.js` normal que importe el componente. Establece [`directives.enabled: false`](https://www.afterpack.dev/es/docs/config#directives-enabled) para omitir el análisis por completo.

## Casos límite

### Modo librería

La salida de `build.lib` es un contrato público. AfterPack se ejecuta sobre el bundle terminado, así que los nombres exportados se conservan; los internos se siguen renombrando y reestructurando.

### Varias salidas

Cada build de Vite ofusca su propio bundle y nada más, así que builds separados son pasadas separadas aunque escriban en un mismo directorio. Fija la misma [`seed`](https://www.afterpack.dev/es/docs/config#seed) en todos ellos si comparten un contrato en tiempo de ejecución.

### Nombres con hash de contenido

El nombre de cada chunk [sigue a sus bytes ofuscados](https://www.afterpack.dev/es/docs/builds#file-names-and-caching). Un archivo JavaScript que llega al bundle como un asset simple, en lugar de como un chunk que Vite compiló, conserva el nombre que Vite dio a sus bytes sin ofuscar, y el build avisa: impórtalo como módulo o sírvelo sin caché de larga duración. Las copias precomprimidas `.gz` y `.br` del bundle se regeneran a partir de los bytes ofuscados, y una copia precomprimida en cualquier otro formato hace fallar el build.

### Integridad de subrecursos

Se rechaza un plugin de Vite que calcula hashes de integridad de subrecursos, porque sus atributos `integrity` no coincidirían con los archivos ofuscados. Elimínalo y calcula la integridad a partir de los archivos desplegados después del build.

## Siguiente

- [Frameworks](https://www.afterpack.dev/es/docs/frameworks): la matriz completa.
- [Builds y CI](https://www.afterpack.dev/es/docs/builds): semillas, desarrollo frente a producción, promocionar los mismos bytes.
- [Protection Map](https://www.afterpack.dev/es/docs/protection-map): cómo leer el informe.
- [Configuración](https://www.afterpack.dev/es/docs/config): la superficie de configuración del motor.
- [Directivas](https://www.afterpack.dev/es/docs/directives): cada clave de marcador y qué hace.
- [Presets](https://www.afterpack.dev/es/docs/presets): la escala de cinco peldaños.