# Vite build को obfuscate करें

@afterpack/vite आपकी build को generateBundle में, Vite के उसे लिखने से पहले, obfuscate करता है। यह reference integration है जिसे Vite परिवार का हर दूसरा package wrap करता है।

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

`@afterpack/vite` reference integration है। [Astro](https://www.afterpack.dev/hi/docs/frameworks/astro), [Svelte](https://www.afterpack.dev/hi/docs/frameworks/svelte), [SvelteKit](https://www.afterpack.dev/hi/docs/frameworks/sveltekit), [Vue](https://www.afterpack.dev/hi/docs/frameworks/vue) और [Nuxt](https://www.afterpack.dev/hi/docs/frameworks/nuxt) सभी इसे wrap करते हैं, इसलिए यह पेज जो बताता है वह उन packages पर भी लागू होता है।

यह आपके source से [`@afterpack` directives](https://www.afterpack.dev/hi/docs/directives) पढ़ता है, फिर engine को `generateBundle` में चलाता है, जब तैयार bundle memory में होता है और Vite ने उसका कुछ भी नहीं लिखा होता।

## Install

```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

पूरा setup बस इतना ही है। अब `npm run build` obfuscated output देता है; `vite dev` अछूता रहता है, क्योंकि plugin केवल build के `generateBundle` पर काम करता है। Vite obfuscated chunks लिखता है, मूल कभी नहीं, और विफल obfuscation `outDir` को वैसा ही छोड़ देता है जैसा वह था।

यह वही obfuscate करता है जो Vite ने build किया: output bundle का हर chunk। जो फ़ाइलें Vite `publicDir` से output directory में ज्यों की त्यों copy करता है, वे build नहीं होतीं, bundle में नहीं होतीं, और उन्हें छुआ नहीं जाता। जिस भी चीज़ को protection चाहिए, उसे bundler से होकर भेजें।

Plugin ये लिखता है:

- [`protectionMap.html`](https://www.afterpack.dev/hi/docs/protection-map): build का एक संयुक्त map, जो map चालू होने पर आपके project root पर gitignored `.afterpack/` में लिखा जाता है। यह डिफ़ॉल्ट रूप से बंद है; देखें [Verify](#verify)। इसमें आपका मूल source embedded होता है। इसे कभी किसी serve होने वाली directory में न पहुँचने दें।
- `foo.js.map`: [source map](https://www.afterpack.dev/hi/docs/config#sourceMap-enabled), जब maps चालू हों। जब maps बंद हों, जो production का डिफ़ॉल्ट है, तो Vite की अपनी map entry obfuscated chunk के बगल में लिखे जाने के बजाय हटा दी जाती है।

यहाँ कोई `foo.backup.<hash>.js` नहीं है। Obfuscated bytes वापस bundle में जाते हैं, इसलिए कोई emit की हुई फ़ाइल नहीं होती जिसके बगल में backup रखा जाए, और [`build.backup: true`](https://www.afterpack.dev/hi/docs/config#build-backup) backup लिखने के बजाय चेतावनी देता है।

`.afterpack/` की अपनी `.gitignore` होती है, इसलिए plugin आपकी `.gitignore` में कभी बदलाव नहीं करता। अगर कोई artifact किसी serve होने वाले path के अंतर्गत पहुँचता है, तो यह चेतावनी देता है।

## Verify

[Protection Map](https://www.afterpack.dev/hi/docs/protection-map) डिफ़ॉल्ट रूप से तब लिखा जाता है जब Vite source map emit करे और build CI (`CI=true` या `CI=1`) में न चल रही हो; [production build](https://www.afterpack.dev/hi/docs/config#build-mode) इसे बंद नहीं करती। जब तक `build.sourcemap` सेट न हो, Vite कोई source map emit नहीं करता, इसलिए सामान्य build में map डिफ़ॉल्ट रूप से बंद रहता है। जब आप उसे देखना चाहें, तो स्पष्ट रूप से माँगें:

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

अगर `build.sourcemap` सेट नहीं है, तो यह Vite के अपने source maps भी चालू कर देता है, ताकि map आपका मूल source render कर सके। मिलने योग्य map के बिना plugin के पास मूल source render करने का कोई आधार नहीं होता, और वह यह बता देता है।

Report `.afterpack/protectionMap.html` में लिखी जाती है। इसमें आपका पूरा source होता है। इसे कभी commit या serve न करें, और केवल local रूप से review करें।

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

> **Source maps कभी production में ship न करें**
>
> एक `.map` फ़ाइल आपके मूल source तक पहुँचती है। इसे कभी deploy न करें।

## Options

हर [configuration key](https://www.afterpack.dev/hi/docs/config) यहाँ options object के रूप में दी जा सकती है, उदाहरण के लिए `afterpackVite({ preset: "hard", complexity: 40 })`। ये सभी वैकल्पिक हैं। Named export `afterpackVite` है।

`preset` और `complexity` अलग-अलग चीज़ें सेट करते हैं। [Preset](https://www.afterpack.dev/hi/docs/presets) एक bundle है: यह complexity target, कुल output multiplier और [inflation budget](https://www.afterpack.dev/hi/docs/config#inflation-max) एक साथ सेट करता है। `complexity` उस bundle के अंदर की एक संख्या है:

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

## Directives

Directives एक [Pro](https://www.afterpack.dev/hi/docs/pro) feature हैं। [Free build](https://www.afterpack.dev/hi/docs/directives#free-builds) में protection बढ़ाने वाला directive build को `DIAG_PRO_DIRECTIVE_REQUIRES_KEY` के साथ रोक देता है।

Directives को plugin आपके source से पढ़ता है, इससे पहले कि कोई minifier comments हटा दे। [Grammar](https://www.afterpack.dev/hi/docs/directives#writing-one) केवल block comments की है:

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

`// @afterpack …` line comments scan नहीं होते और उन्हें [diagnostics](https://www.afterpack.dev/hi/docs/diagnostics) के रूप में report किया जाता है।

Directive जो भी key सेट कर सकता है, वह हर key [Directives](https://www.afterpack.dev/hi/docs/directives#what-you-can-set) पेज पर है।

Capture `node_modules` और non-JS/TS फ़ाइलों को छोड़ देता है। `.vue` या `.svelte` single-file component के अंदर का directive capture नहीं होता। इसके बजाय उसे एक सादे `.ts`/`.js` module में रखें जिसे component import करता है। Scan को पूरी तरह छोड़ने के लिए [`directives.enabled: false`](https://www.afterpack.dev/hi/docs/config#directives-enabled) सेट करें।

## Edge cases

### Library mode

`build.lib` output एक public contract है। AfterPack तैयार bundle पर चलता है, इसलिए exported names बने रहते हैं; internals फिर भी rename और restructure होते हैं।

### कई outputs

हर Vite build केवल अपना bundle obfuscate करती है और कुछ नहीं, इसलिए अलग-अलग builds अलग passes हैं, भले ही वे एक ही directory में लिखें। अगर वे एक runtime contract साझा करती हैं, तो उन सब पर एक ही [`seed`](https://www.afterpack.dev/hi/docs/config#seed) pin करें।

### Content-hashed नाम

हर chunk का नाम [उसके obfuscated bytes के साथ चलता है](https://www.afterpack.dev/hi/docs/builds#file-names-and-caching)। जो JavaScript फ़ाइल Vite द्वारा build किए गए chunk के बजाय plain asset के रूप में bundle में पहुँचती है, वह वही नाम रखती है जो Vite ने उसके unobfuscated bytes को दिया था, और build चेतावनी देता है: उसे module के रूप में import करें, या उसे long-lived caching के बिना serve करें। Bundle में मौजूद precompressed `.gz` और `.br` copies obfuscated bytes से फिर से बनाई जाती हैं, और किसी दूसरे format की precompressed copy build को विफल कर देती है।

### Subresource integrity

Subresource integrity hashes compute करने वाला Vite plugin अस्वीकार कर दिया जाता है, क्योंकि उसके `integrity` attributes obfuscated फ़ाइलों से मेल नहीं खाएँगे। उसे हटाएँ, और build के बाद deploy की गई फ़ाइलों से integrity compute करें।

## आगे

- [Frameworks](https://www.afterpack.dev/hi/docs/frameworks): पूरी तालिका।
- [Builds & CI](https://www.afterpack.dev/hi/docs/builds): seeds, dev बनाम prod, वही bytes promote करना।
- [Protection Map](https://www.afterpack.dev/hi/docs/protection-map): report पढ़ना।
- [Configuration](https://www.afterpack.dev/hi/docs/config): engine का config surface।
- [Directives](https://www.afterpack.dev/hi/docs/directives): हर marker key, और वह क्या करती है।
- [Presets](https://www.afterpack.dev/hi/docs/presets): पाँच पायदानों की सीढ़ी।