AfterPack
Markdown में देखें

Nuxt app को obfuscate करें

@afterpack/nuxt एक Nuxt 3 module है जो Nuxt की Vite config पर @afterpack/vite को register करता है।

Nuxt 3 Vite से bundle करता है, और AfterPack bundler स्तर पर integrate होता है, इसलिए @afterpack/nuxt एक पतला Nuxt module है: यह Nuxt की Vite config पर @afterpack/vite को register करने के लिए addVitePlugin call करता है, और client bundle Vite के generateBundle में, build लिखे जाने से पहले, obfuscate होता है।

Nuxt 2 projects webpack से build होते हैं। वहाँ इसके बजाय @afterpack/webpack इस्तेमाल करें।

Install

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

Options afterpack config key के नीचे रहते हैं।

Build

nuxt generate (static) या nuxt build (SSR) अब obfuscated output देता है। nuxt dev अछूता रहता है, क्योंकि plugin केवल Vite के generateBundle पर चलता है। हर Vite environment (client और server) के लिए एक नया @afterpack/vite plugin instance register होता है, और हर एक Vite के लिखने से पहले अपना bundle obfuscate करता है।

Static बनाम server

  • Static / prerendered (nuxt generate): .output/public/_nuxt/ में prerendered client bundle obfuscate होता है। Protected client code ship करने के लिए यही सुझाई गई बनावट है।
  • Server (SSR): client bundle उसी तरह obfuscate होता है; Nitro server bundle आपका अपना deployment artifact है।

seed: "git" तब pin करें जब आप चाहते हैं कि एक release के client हिस्से एक ही seed से build हों, या जब किसी build को byte-reproducible होना हो (cache hits, golden snapshots)। Builds और CI इस trade-off को कवर करता है। Nuxt हर build के लिए एक नया buildId भी बनाता है।

Verify

export default defineNuxtConfig({
  modules: ["@afterpack/nuxt"],
  afterpack: { protectionMap: { enabled: true } },
});

संयुक्त Protection Map को gitignored .afterpack/protectionMap.html में लिखता है। Source map वाला side effect और handling के नियम @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.

Options

हर configuration key afterpack config key के नीचे दी जा सकती है, और ज्यों की त्यों @afterpack/vite को आगे भेजी जाती है, उदाहरण के लिए afterpack: { preset: "hard", complexity: 40 }। Type alias AfterpackNuxtOptions, AfterpackViteOptions ही है।

Directives

.vue फ़ाइल के भीतर /* @afterpack … */ marker capture नहीं होता। Directive को इसके बजाय एक सादे .ts/.js module (एक composable, एक utils/ फ़ाइल) में रखें जिसे component import करता है।

आगे

  • Frameworks: पूरी matrix।
  • Vite: वह plugin जो असली काम करता है।
  • Vue: एक सादा Vue 3 + Vite app।
  • Protection Map: रिपोर्ट को पढ़ना।
  • Builds और CI: seeds, dev-बनाम-prod, वही bytes promote करना।