Astro हर island और client bundle को अपनी Vite pipeline से compile करता है, और AfterPack bundler स्तर पर integrate होता है। @afterpack/astro इसलिए है ताकि आपको vite: { plugins: [...] } ख़ुद हाथ से wire न करना पड़े।
सब कुछ @afterpack/vite के generateBundle में, Astro की अपनी Vite pipeline के अंदर होता है।
Install
$ npm install -D @afterpack/astro// astro.config.mjs
import { defineConfig } from "astro/config";
import afterpack from "@afterpack/astro";
export default defineConfig({
integrations: [afterpack()],
});Default export और named afterpackAstro export एक ही function हैं।
Build
अब astro build obfuscated output देता है। astro dev अछूता रहता है, क्योंकि plugin केवल build के generateBundle पर चलता है, वही hook जिसे @afterpack/vite हमेशा इस्तेमाल करता है। Astro obfuscated chunks लिखता है; मूल फ़ाइलें कभी dist/ तक नहीं पहुँचतीं।
Obfuscate होने वाला हिस्सा वह JavaScript है जो Astro emit करता है: island bundles और client scripts, आमतौर पर dist/_astro/ के अंतर्गत। Server-rendered .astro template logic जो कभी client JS नहीं बनता, इसके दायरे से बाहर है।
Verify
astro build production build mode के साथ चलता है, इसलिए जब आप Protection Map देखना चाहें तो उसे स्पष्ट रूप से माँगें:
integrations: [afterpack({ protectionMap: { enabled: true } })],यह gitignored .afterpack/protectionMap.html में लिखा जाता है। Source map पर इसका असर और उसे संभालने के नियम @afterpack/vite वाले ही हैं।
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.Options
हर configuration key यहाँ options object के रूप में दी जा सकती है, जिसे ज्यों का त्यों @afterpack/vite को आगे भेज दिया जाता है, उदाहरण के लिए afterpack({ preset: "hard", complexity: 40 })। Type alias AfterpackAstroOptions, AfterpackViteOptions ही है:
integrations: [afterpack({ seed: "git", preset: "medium" })],Directives
Directives को plugin minification से पहले आपके source से पढ़ता है। केवल block comments:
.astro component फ़ाइलों के अंदर लिखे directives capture नहीं होते। Directive को island की .jsx/.tsx फ़ाइल में रखें:
/* @afterpack preset=hard */
export function LicenseGate({ token }) {
// ...
}
/* @afterpack end */आगे
- Frameworks: पूरी तालिका।
- Vite: वह plugin जो असली काम करता है।
- Protection Map: report पढ़ना।
- Directives: marker grammar पूरी तरह।
- Builds & CI: seeds, dev बनाम prod, वही bytes promote करना।