@intlayer/docs 8.12.1 → 8.12.3

package/docs/bn/bundle_optimization.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-25
-updatedAt: 2026-04-08
-title: i18n বান্ডেল সাইজ এবং পারফরম্যান্স অপ্টিমাইজ করা
-description: আন্তর্জাতিকীকরণ (i18n) কন্টেন্ট অপ্টিমাইজ করে অ্যাপ্লিকেশনের বান্ডেল সাইজ কমান। Intlayer-এর মাধ্যমে ডিকশনারির জন্য কীভাবে tree shaking এবং lazy loading ব্যবহার করবেন তা শিখুন।
+updatedAt: 2026-06-07
+title: i18n বান্ডেল সাইজ ও পারফরম্যান্স অপ্টিমাইজেশন
+description: আপনার অ্যাপ্লিকেশনের বান্ডেল সাইজ কমান আন্তর্জাতিকীকরণ (i18n) কন্টেন্ট অপ্টিমাইজ করে। Intlayer-এর মাধ্যমে ডিকশনারির জন্য ট্রি শেকিং (tree shaking) এবং লেজি লোডিং (lazy loading) কীভাবে ব্যবহার করবেন তা জানুন।
 keywords:
   - বান্ডেল অপ্টিমাইজেশন
   - কন্টেন্ট অটোমেশন
@@ -16,33 +16,36 @@ slugs:
   - concept
   - bundle-optimization
 history:
+  - version: 8.12.0
+    date: 2026-06-07
+    changes: "Babel/Webpack-এর জন্য `intlayerPurgeBabelPlugin` এবং `intlayerMinifyBabelPlugin` যোগ করা হয়েছে; প্লাগিন পাইপলাইন পরিষ্কার করা হয়েছে"
   - version: 8.7.0
     date: 2026-04-08
-    changes: "বিল্ড কনফিগারেশনে `minify` এবং `purge` অপশন যুক্ত করা হয়েছে"
+    changes: "বিল্ড কনফিগারেশনে `minify` এবং `purge` অপশন যোগ করা হয়েছে"
 ---
 
-# i18n বান্ডেল সাইজ এবং পারফরম্যান্স অপ্টিমাইজ করা
+# i18n বান্ডেল সাইজ ও পারফরম্যান্স অপ্টিমাইজেশন
 
-JSON ফাইলের ওপর নির্ভরশীল প্রচলিত i18n সমাধানগুলোর প্রধান চ্যালেঞ্জ হলো কন্টেন্ট সাইজ ম্যানেজ করা। যদি ডেভেলপাররা ম্যানুয়ালি কন্টেন্টকে নেমস্পেসে আলাদা না করেন, তবে ব্যবহারকারীরা প্রায়ই প্রতিটি পেজ এবং সম্ভাব্যভাবে প্রতিটি ভাষার অনুবাদ ডাউনলোড করেন, এমনকি একটি মাত্র পেজ দেখার জন্য।
+JSON ফাইল ব্যবহার করে এমন প্রচলিত i18n সলিউশনগুলোর অন্যতম প্রধান সমস্যা হলো কন্টেন্টের সাইজ ম্যানেজ করা। ডেভেলপাররা যদি ম্যানুয়ালি কন্টেন্টকে নেমস্পেস-এ আলাদা না করেন, তবে ব্যবহারকারীরা প্রায়শই শুধুমাত্র একটি পেজ দেখার জন্য প্রতিটি পেজ এবং সম্ভাব্য প্রতিটি ভাষার অনুবাদ ডাউনলোড করে ফেলেন।
 
-উদাহরণস্বরূপ, ১০টি ভাষায় অনূদিত ১০টি পেজের একটি অ্যাপ্লিকেশনের ক্ষেত্রে একজন ব্যবহারকারী ১০০টি পেজের কন্টেন্ট ডাউনলোড করতে পারেন, যদিও তার প্রয়োজন মাত্র **একটি** (বর্তমান ভাষায় বর্তমান পেজটি)। এটি ব্যান্ডউইথের অপচয় করে এবং লোডিং সময় বাড়িয়ে দেয়।
+উদাহরণস্বরূপ, ১০টি পেজ এবং ১০টি ভাষায় অনুবাদিত একটি অ্যাপ্লিকেশনের ক্ষেত্রে, একজন ব্যবহারকারী হয়তো ১০০টি পেজের কন্টেন্ট ডাউনলোড করে ফেলতে পারে, যদিও তার প্রয়োজন শুধুমাত্র **একটি** (বর্তমান ভাষায় বর্তমান পেজটি)। এতে ব্যান্ডউইথ নষ্ট হয় এবং লোড হতে অনেক বেশি সময় লাগে।
 
-**Intlayer বিল্ড-টাইম অপ্টিমাইজেশনের মাধ্যমে এই সমস্যার সমাধান করে।** এটি আপনার কোড বিশ্লেষণ করে এবং প্রতিটি কম্পোনেন্টে প্রকৃতপক্ষে কোন ডিকশনারিগুলো ব্যবহৃত হচ্ছে তা শনাক্ত করে এবং শুধুমাত্র প্রয়োজনীয় কন্টেন্টগুলো আপনার বান্ডেলে যুক্ত করে।
+**Intlayer বিল্ড-টাইম অপ্টিমাইজেশনের মাধ্যমে এই সমস্যার সমাধান করে।** এটি আপনার কোড বিশ্লেষণ করে ঠিক কোন কম্পোনেন্টের জন্য কোন ডিকশনারিগুলো ব্যবহৃত হচ্ছে তা শনাক্ত করে এবং কেবল প্রয়োজনীয় কন্টেন্টটুকুই আপনার বান্ডেলের মধ্যে পুনরায় প্রবেশ করায়।
 
 ## সূচিপত্র
 
 <TOC />
 
-## আপনার বান্ডেল স্ক্যান করুন
+## আপনার বান্ডেল বিশ্লেষণ করুন
 
-বান্ডেল বিশ্লেষণ করা হলো "ভারী" JSON ফাইল এবং কোড-স্প্লিটিং (code-splitting) এর সুযোগ শনাক্ত করার প্রথম ধাপ। এই টুলগুলো আপনার অ্যাপ্লিকেশনের কম্পাইল করা কোডের একটি ভিজ্যুয়াল ট্রিম্যাপ (treemap) তৈরি করে, যা আপনাকে দেখতে সাহায্য করে কোন লাইব্রেরিগুলো সবচেয়ে বেশি জায়গা নিচ্ছে।
+"ভারী" JSON ফাইল এবং কোড-স্প্লিটিং-এর সুযোগ চিহ্নিত করার প্রথম ধাপ হলো আপনার বান্ডেল বিশ্লেষণ করা। এই টুলগুলো আপনার অ্যাপ্লিকেশনের কম্পাইল করা কোডের একটি ভিজ্যুয়াল ট্রিম্যাপ (treemap) তৈরি করে, যা দিয়ে আপনি ঠিক বুঝতে পারবেন কোন লাইব্রেরিগুলো সবচেয়ে বেশি জায়গা নিচ্ছে।
 
 <Tabs>
  <Tab value="vite">
 
 ### Vite / Rollup
 
-Vite এর ব্যাকএন্ডে Rollup ব্যবহৃত হয়। `rollup-plugin-visualizer` প্লাগইনটি একটি ইন্টারঅ্যাক্টিভ HTML ফাইল তৈরি করে যা আপনার গ্রাফের প্রতিটি মডিউলের সাইজ দেখায়।
+Vite এর ভেতরে Rollup ব্যবহার করে কাজ করে। `rollup-plugin-visualizer` একটি ইন্টারেক্টিভ HTML ফাইল তৈরি করে যা আপনার গ্রাফের প্রতিটি মডিউলের সাইজ দেখায়।
 
 ```bash
 npm install -D rollup-plugin-visualizer
@@ -55,7 +58,7 @@ import { visualizer } from "rollup-plugin-visualizer";
 export default defineConfig({
   plugins: [
     visualizer({
-      open: true, // রিপোর্টটি আপনার ব্রাউজারে স্বয়ংক্রিয়ভাবে খুলবে
+      open: true, // ব্রাউজারে স্বয়ংক্রিয়ভাবে রিপোর্ট খুলবে
       filename: "stats.html",
       gzipSize: true,
       brotliSize: true,
@@ -69,7 +72,7 @@ export default defineConfig({
 
 ### Next.js (Turbopack)
 
-যেসব প্রজেক্টে App Router এবং Turbopack ব্যবহৃত হচ্ছে, সেগুলোর জন্য Next.js একটি বিল্ট-ইন এক্সপেরিমেন্টাল অ্যানালাইজার প্রদান করে যা ব্যবহারের জন্য বাড়তি কোনো ডিপেন্ডেন্সির প্রয়োজন হয় না।
+App Router এবং Turbopack ব্যবহার করা প্রজেক্টগুলোর জন্য Next.js একটি বিল্ট-ইন, পরীক্ষামূলক অ্যানালাইজার সরবরাহ করে যার জন্য অতিরিক্ত কোনো ডিপেন্ডেন্সির প্রয়োজন হয় না।
 
 ```bash packageManager='npm'
 npx next experimental-analyze
@@ -92,7 +95,7 @@ bun next experimental-analyze
 
 ### Next.js (Webpack)
 
-যদি আপনি Next.js-এ ডিফল্ট Webpack বন্ডলার ব্যবহার করেন, তবে অফিশিয়াল বান্ডেল অ্যানালাইজার ব্যবহার করুন। বিল্ড করার সময় একটি এনভায়রনমেন্ট ভেরিয়েবল সেট করে এটি চালু করুন।
+যদি আপনি Next.js-এ ডিফল্ট Webpack বান্ডলার ব্যবহার করেন, তবে অফিশিয়াল বান্ডেল অ্যানালাইজার ব্যবহার করুন। বিল্ড করার সময় একটি পরিবেশ চলক (environment variable) সেট করে এটি ট্রিগার করতে পারেন।
 
 ```bash packageManager='npm'
 npm install -D @next/bundle-analyzer
@@ -120,7 +123,7 @@ module.exports = withBundleAnalyzer({
 });
 ```
 
-**ব্যবহার পদ্ধতি:**
+**ব্যবহারবিধি:**
 
 ```bash
 ANALYZE=true npm run build
@@ -129,9 +132,9 @@ ANALYZE=true npm run build
  </Tab>
  <Tab value="Webpack (CRA / Angular / etc)">
 
-### স্ট্যান্ডার্ড Webpack
+### Standard Webpack
 
-Create React App (ejected), Angular বা কাস্টম Webpack সেটআপের জন্য ইন্ডাস্ট্রি-স্ট্যান্ডার্ড `webpack-bundle-analyzer` ব্যবহার করুন।
+Create React App (ejected), Angular, অথবা কাস্টম Webpack সেটআপের জন্য, বহুল প্রচলিত `webpack-bundle-analyzer` ব্যবহার করুন।
 
 ```bash packageManager='npm'
 npm install -D webpack-bundle-analyzer
@@ -166,18 +169,55 @@ export default {
  </Tab>
 </Tabs>
 
-## এটি কীভাবে কাজ করে
+## কীভাবে কাজ করে
 
-Intlayer **প্রতি-কম্পোনেন্ট পলি (per-component approach)** ব্যবহার করে। গ্লোবাল JSON ফাইলের বিপরীতে, আপনার কন্টেন্টটি আপনার কম্পোনেন্টের সাথেই বা এর ভেতরে ডিফাইন করা থাকে। বিল্ড প্রসেসের সময়, Intlayer যা করে:
+Intlayer **প্রতি-কম্পোনেন্ট (per-component) কৌশল** ব্যবহার করে। গ্লোবাল JSON ফাইলগুলোর বিপরীতে, আপনার কন্টেন্টগুলো সরাসরি কম্পোনেন্টের পাশে বা ভেতরে সংজ্ঞায়িত করা থাকে। বিল্ড প্রক্রিয়ার সময়, Intlayer যা করে:
 
-১. `useIntlayer` কলগুলো খুঁজে পেতে আপনার কোডটি **বিশ্লেষণ** করে।
-২. সংশ্লিষ্ট ডিকশনারি কন্টেন্টগুলো **তৈরি (build)** করে।
-৩. আপনার কনফিগারেশনের ওপর ভিত্তি করে `useIntlayer` কলটিকে অপ্টিমাইজ করা কোড দ্বারা **প্রতিস্থাপন** করে।
+1. আপনার কোড **বিশ্লেষণ** করে `useIntlayer` কলগুলো খুঁজে বের করে।
+2. সংশ্লিষ্ট ডিকশনারি কন্টেন্ট **বিল্ড** করে।
+3. আপনার কনফিগারেশনের উপর ভিত্তি করে অপ্টিমাইজ করা কোড দিয়ে `useIntlayer` কলটিকে **প্রতিস্থাপন** করে।
 
 এটি নিশ্চিত করে যে:
 
-- যদি কোনো কম্পোনেন্ট ইমপোর্ট করা না হয়, তবে এর কন্টেন্ট বান্ডেলে অন্তর্ভুক্ত হবে না (Dead Code Elimination)।
-- যদি কোনো কম্পোনেন্ট লেজি-লোডেড (lazy-loaded) হয়, তবে এর কন্টেন্টও লেজি-লোড হবে।
+- যদি কোনো কম্পোনেন্ট ইমপোর্ট (import) করা না হয়, তবে তার কন্টেন্ট বান্ডেলে অন্তর্ভুক্ত হয় না (Dead Code Elimination)।
+- যদি কোনো কম্পোনেন্ট লেজি-লোড (lazy-loaded) হয়, তবে তার কন্টেন্টও লেজি-লোড হয়।
+
+## প্লাগিন রেফারেন্স
+
+Intlayer-এর বিল্ড অপ্টিমাইজেশন কয়েকটি আলাদা প্লাগিনে বিভক্ত, যার প্রত্যেকটির একটি সুনির্দিষ্ট দায়িত্ব রয়েছে। কনফিগারেশন সেট আপ করার সময় কোনো প্লাগিন কী করে তা জানা থাকলে বিভ্রান্তি এড়ানো যায়।
+
+### Babel প্লাগিনসমূহ (`@intlayer/babel`)
+
+এগুলো Webpack-ভিত্তিক সেটআপগুলোর জন্য (Babel সহ Next.js, CRA, কাস্টম Webpack ইত্যাদি) সরাসরি `babel.config.js`-এ ব্যবহৃত হয়।
+
+| প্লাগিন                       | কী কাজ করে                                                                                                                                  |
+| :---------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------ |
+| `intlayerExtractBabelPlugin`  | `.content.ts` ফাইলগুলো স্ক্যান করে এবং কম্পাইল করা ডিকশনারিগুলো `.intlayer/`-এ লেখে                                                         |
+| `intlayerOptimizeBabelPlugin` | `useIntlayer('key')` কে `useDictionary(hash)`-এ রূপান্তর করে এবং সঠিক ডিকশনারির `import` যোগ করে                                            |
+| `intlayerPurgeBabelPlugin`    | সব সোর্স ফাইল স্ক্যান করে, এবং কম্পাইল করা `.intlayer/**/*.json` ডিকশনারি ফাইলগুলো থেকে **অব্যবহৃত কন্টেন্ট ফিল্ড** সরিয়ে দেয়             |
+| `intlayerMinifyBabelPlugin`   | JSON ফাইল এবং সোর্স কোড—উভয় জায়গাতেই **কন্টেন্ট ফিল্ডের কী (keys) গুলোকে** ছোট অক্ষরের ছদ্মনামে (alias) রূপান্তর করে (যেমন `title` → `a`) |
+
+> **প্লাগিনের ক্রম অত্যন্ত গুরুত্বপূর্ণ।** আপনার `babel.config.js` ফাইলে purge এবং minify প্লাগিনগুলো অবশ্যই optimize প্লাগিনের **আগে** রাখতে হবে। optimize পাস `useIntlayer('key')` কে একটি অস্বচ্ছ `useDictionary(hash)` কল দিয়ে প্রতিস্থাপন করে, যার ফলে ডিকশনারির কী-এর তথ্য হারিয়ে যায়, অথচ purge এবং minify ধাপগুলোতে কোন ফিল্ডগুলো ব্যবহৃত হচ্ছে তা চেনার জন্য ঐ তথ্যগুলো অপরিহার্য।
+
+প্রতিটি Babel প্লাগিনের সাথে একটি অপশন হেল্পার (options helper) আছে যা কনফিগারেশন লোড করার সময় আপনার `intlayer.config.ts` একবার পড়ে এবং প্রাক-নির্ধারিত মানগুলো (pre-resolved values) ফেরত দেয়:
+
+| অপশন হেল্পার                 | কোন প্লাগিনের সাথে ব্যবহৃত হয় |
+| :--------------------------- | :----------------------------- |
+| `getExtractPluginOptions()`  | `intlayerExtractBabelPlugin`   |
+| `getOptimizePluginOptions()` | `intlayerOptimizeBabelPlugin`  |
+| `getPurgePluginOptions()`    | `intlayerPurgeBabelPlugin`     |
+| `getMinifyPluginOptions()`   | `intlayerMinifyBabelPlugin`    |
+
+### Vite প্লাগিনসমূহ (`vite-intlayer`)
+
+Vite ব্যবহারকারীদের **কখনোই এগুলো সরাসরি কনফিগার করতে হয় না**। আপনি যখন `vite.config.ts`-এ `withIntlayer()` কল করেন, তখন এগুলো স্বয়ংক্রিয়ভাবে যুক্ত হয়ে যায়। `intlayer.config.ts`-এর `build.purge` এবং `build.minify` ফ্ল্যাগগুলো কোনো অতিরিক্ত প্লাগিন রেজিস্টার করা ছাড়াই তাদের নির্দিষ্ট কাজ সম্পাদন করে।
+
+| অভ্যন্তরীণ Vite প্লাগিন | সমতুল্য আচরণ                                                                                  |
+| :---------------------- | :-------------------------------------------------------------------------------------------- |
+| Usage analyzer          | `intlayerPurgeBabelPlugin`-এর অ্যানালাইজ পাসের সমতুল্য                                        |
+| Dictionary prune        | `intlayerPurgeBabelPlugin`-এর JSON লেখার পাসের সমতুল্য                                        |
+| Dictionary minify       | `intlayerMinifyBabelPlugin`-এর JSON লেখার পাসের সমতুল্য                                       |
+| Babel transform         | `intlayerMinifyBabelPlugin`-এর সোর্স কোড রিনেম করা + `intlayerOptimizeBabelPlugin`-এর সমতুল্য |
 
 ## প্ল্যাটফর্ম অনুযায়ী সেটআপ
 
@@ -186,9 +226,9 @@ Intlayer **প্রতি-কম্পোনেন্ট পলি (per-compone
 
 ### Next.js
 
-Next.js-এ ট্রান্সফর্মেশন হ্যান্ডেল করার জন্য `@intlayer/swc` প্লাগইনটির প্রয়োজন হয়, কারণ Next.js বিল্ড করার জন্য SWC ব্যবহার করে।
+Next.js-এর ক্ষেত্রে অপ্টিমাইজ পাসের (import রূপান্তর) জন্য `@intlayer/swc` প্লাগিন প্রয়োজন, কারণ Next.js বিল্ড করার জন্য SWC ব্যবহার করে।
 
-> এই প্লাগইনটি ডিফল্টভাবে ইনস্টল করা থাকে না কারণ SWC প্লাগইনগুলো এখনও Next.js-এর জন্য এক্সপেরিমেন্টাল পর্যায়ে রয়েছে। ভবিষ্যতে এটি পরিবর্তিত হতে পারে।
+> এই প্লাগিনটি ডিফল্টভাবে ইনস্টল হয় না কারণ SWC প্লাগিনগুলো Next.js-এর জন্য এখনও পরীক্ষামূলক পর্যায়ে রয়েছে। এটি ভবিষ্যতে পরিবর্তন হতে পারে।
 
 ```bash packageManager="npm"
 npm install -D @intlayer/swc
@@ -206,21 +246,63 @@ pnpm add -D @intlayer/swc
 bun add -d @intlayer/swc
 ```
 
-ইনস্টল করার পর, Intlayer স্বয়ংক্রিয়ভাবে প্লাগইনটি শনাক্ত করবে এবং ব্যবহার করবে।
+একবার ইনস্টল হয়ে গেলে, Intlayer স্বয়ংক্রিয়ভাবে প্লাগিনটি শনাক্ত করবে এবং ব্যবহার করবে।
+
+**purge এবং minify** পাসের জন্য (ফিল্ড মুছে ফেলা এবং ফিল্ডের নাম পরিবর্তন), এর পাশাপাশি `@intlayer/babel` ইনস্টল করুন এবং Babel প্লাগিনগুলো যোগ করুন। যদিও Next.js ট্রান্সফর্মেশনের জন্য SWC ব্যবহার করে, তবুও প্লাগিন কনফিগারেশনের জন্য এটি `babel.config.js` মূল্যায়ন করে; ফলে SWC-র কাজ শুরু করার আগেই Babel প্লাগিনগুলো একটি প্রি-পাস হিসেবে রান করে।
+
+```bash packageManager="npm"
+npm install -D @intlayer/babel
+```
+
+```javascript fileName="babel.config.js"
+const {
+  intlayerPurgeBabelPlugin,
+  intlayerMinifyBabelPlugin,
+  getPurgePluginOptions,
+  getMinifyPluginOptions,
+} = require("@intlayer/babel");
+
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    // Purge: .intlayer/**/*.json থেকে অব্যবহৃত কন্টেন্ট ফিল্ডগুলো রিমুভ করে
+    [intlayerPurgeBabelPlugin, getPurgePluginOptions()],
+    // Minify: JSON + সোর্স কোডে কন্টেন্ট ফিল্ডের কী-গুলোর নাম পরিবর্তন করে
+    [intlayerMinifyBabelPlugin, getMinifyPluginOptions()],
+    // দ্রষ্টব্য: intlayerOptimizeBabelPlugin এখানে প্রয়োজন নেই কারণ
+    // @intlayer/swc নিজে থেকেই useIntlayer → useDictionary রূপান্তরটি হ্যান্ডেল করে।
+  ],
+};
+```
 
  </Tab>
  <Tab value="vite">
 
 ### Vite
 
-Vite `@intlayer/babel` প্লাগইন ব্যবহার করে যা `vite-intlayer`-এর ডিপেন্ডেন্সি হিসেবে যুক্ত থাকে। অপ্টিমাইজেশন ডিফল্টভাবে চালু থাকে। বাড়তি কিছু করার প্রয়োজন নেই।
+Vite `@intlayer/babel` প্লাগিনটি ব্যবহার করে, যা `vite-intlayer`-এর একটি ডিপেন্ডেন্সি হিসেবে অন্তর্ভুক্ত। পুরো অপ্টিমাইজেশন পাইপলাইন — import রূপান্তর, purge, এবং minify — ডিফল্টভাবে সক্রিয় থাকে এবং এর জন্য অতিরিক্ত কোনো প্লাগিন রেজিস্টার করার প্রয়োজন নেই।
+
+`intlayer.config.ts`-এ নির্দিষ্ট ফ্ল্যাগ সেট করে purge এবং minify চালু করুন:
+
+```typescript fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  build: {
+    purge: true, // বান্ডেল করা JSON থেকে অব্যবহৃত কন্টেন্ট ফিল্ড রিমুভ করবে
+    minify: true, // কন্টেন্ট ফিল্ড কী-গুলোকে ছোট ছদ্মনামে রিনেম করবে
+  },
+};
+
+export default config;
+```
 
  </Tab>
  <Tab value="webpack">
 
-### Webpack
+### Webpack (এবং Babel সহ Next.js)
 
-Webpack-এ Intlayer-এর মাধ্যমে বান্ডেল অপ্টিমাইজেশন চালু করার জন্য আপনাকে প্রয়োজনীয় Babel (`@intlayer/babel`) বা SWC (`@intlayer/swc`) প্লাগইন ইনস্টল এবং কনফিগার করতে হবে।
+`@intlayer/babel` ইনস্টল করুন:
 
 ```bash packageManager="npm"
 npm install -D @intlayer/babel
@@ -238,14 +320,37 @@ pnpm add -D @intlayer/babel
 bun add -d @intlayer/babel
 ```
 
-```typescript fileName="babel.config.js"
+সঠিক ক্রমে চারটে প্লাগিনই `babel.config.js`-এ যোগ করুন:
+
+```javascript fileName="babel.config.js"
 const {
-  getOptimizePluginOptions,
+  intlayerExtractBabelPlugin,
+  intlayerPurgeBabelPlugin,
+  intlayerMinifyBabelPlugin,
   intlayerOptimizeBabelPlugin,
+  getExtractPluginOptions,
+  getPurgePluginOptions,
+  getMinifyPluginOptions,
+  getOptimizePluginOptions,
 } = require("@intlayer/babel");
 
 module.exports = {
-  plugins: [[intlayerOptimizeBabelPlugin, getOptimizePluginOptions()]],
+  plugins: [
+    // Extract: .content.ts ফাইলগুলো কম্পাইল করে → .intlayer/**/*.json তৈরি করে
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+
+    // Purge: .intlayer/**/*.json থেকে অব্যবহৃত ফিল্ড রিমুভ করে
+    //    (intlayer.config.ts-এর build.purge ফ্ল্যাগ পড়ে কাজ করে)
+    [intlayerPurgeBabelPlugin, getPurgePluginOptions()],
+
+    // Minify: JSON + সোর্স কোডে ফিল্ড কী রিনেম করে
+    //    (intlayer.config.ts-এর build.minify ফ্ল্যাগ পড়ে কাজ করে)
+    [intlayerMinifyBabelPlugin, getMinifyPluginOptions()],
+
+    // Optimize: useIntlayer('key') কে → useDictionary(hash) এ রূপান্তর করে
+    //    এটি অবশ্যই সবার শেষে থাকতে হবে, কারণ এটি ডিকশনারির কী মুছে দেয়।
+    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
+  ],
 };
 ```
 
@@ -254,57 +359,62 @@ module.exports = {
 
 ## কনফিগারেশন
 
-আপনি আপনার `intlayer.config.ts`-এর `build` প্রপার্টির মাধ্যমে Intlayer কীভাবে আপনার বান্ডেল অপ্টিমাইজ করবে তা নিয়ন্ত্রণ করতে পারেন।
+আপনি আপনার `intlayer.config.ts` ফাইলের `build` প্রপার্টির মাধ্যমে Intlayer কীভাবে আপনার বান্ডেল অপ্টিমাইজ করবে তা নিয়ন্ত্রণ করতে পারবেন।
 
 ```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
   internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH],
+    locales: [Locales.ENGLISH, Locales.BENGALI],
     defaultLocale: Locales.ENGLISH,
   },
   dictionary: {
     importMode: "dynamic",
   },
   build: {
-    /**
-     * বান্ডেল সাইজ কমাতে ডিকশনারিগুলো মিনিফাই করুন।
-     */
-     minify: true;
-
-    /**
-     * ডিকশনারিতে অব্যবহৃত কীগুলো (keys) মুছে ফেলুন (purge)
-     */
-     purge: true;
-
-    /**
-     * বিল্ড করার সময় টাইপস্ক্রিপ্ট টাইপগুলো চেক করা হবে কিনা তা নির্দেশ করে
-     */
-    checkTypes: false;
+    // বিল্ড-টাইমে useIntlayer() কলগুলোকে সরাসরি ডিকশনারি ইমপোর্ট দিয়ে প্রতিস্থাপন করে।
+    // undefined = auto (production-এ চালু থাকে), true = সর্বদা, false = কখনোই না।
+    optimize: undefined,
+
+    // কম্পাইল করা ডিকশনারিতে কন্টেন্ট ফিল্ডের কী-গুলোকে ছোট অক্ষরের ছদ্মনামে
+    // রিনেম করে (যেমন title → a)। এটি JSON সাইজ ছোট করে; এর জন্য optimize চালু থাকা প্রয়োজন।
+    minify: true,
+
+    // সোর্স কোডে যেসব কন্টেন্ট ফিল্ড কখনোই অ্যাক্সেস করা হয় না সেগুলোকে সরিয়ে দেয়।
+    // এর জন্য optimize চালু থাকা প্রয়োজন।
+    purge: true,
   },
 };
 
 export default config;
 ```
 
-> বেশিরভাগ ক্ষেত্রে `optimize` অপশনটি ডিফল্ট অবস্থায় রাখাই শ্রেয়।
+> বেশিরভাগ ক্ষেত্রে `optimize`-এর ডিফল্ট মান (`undefined`) রাখাটাই বাঞ্ছনীয়।
 
-> বিস্তারিত জানার জন্য কনফিগারেশন ডকুমেন্ট দেখুন: [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/bn/configuration.md)
+> সমস্ত অপশনের জন্য কনফিগারেশন রেফারেন্স দেখুন: [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/bn/configuration.md)
 
-### বিল্ড অপশন
+### বিল্ড অপশনসমূহ
 
-`build` কনফিগারেশন অবজেক্টের অধীনে নিচের অপশনগুলো উপলব্ধ রয়েছে:
+| প্রপার্টি      | ধরন                    | ডিফল্ট      | বিবরণ                                                                                                                                                                                                   |
+| :------------- | :--------------------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **`optimize`** | `boolean \| undefined` | `undefined` | ইমপোর্ট রূপান্তর পাসটি চালু করে। `undefined` = শুধুমাত্র প্রোডাকশন বিল্ডে সক্রিয় থাকে। `false` দিলে purge এবং minify-ও নিষ্ক্রিয় হয়ে যায়।                                                           |
+| **`minify`**   | `boolean`              | `false`     | কম্পাইল করা JSON ফাইলে কন্টেন্ট ফিল্ডের কী-গুলোকে ছোট অক্ষরের ছদ্মনামে রিনেম করে। সেই সাথে সোর্স কোডে থাকা প্রপার্টি অ্যাক্সেসগুলোও পরিবর্তন করে। `optimize` যদি `false` থাকে তবে এটি কোনো কাজ করবে না। |
+| **`purge`**    | `boolean`              | `false`     | সোর্স কোডে যেসব কন্টেন্ট ফিল্ড স্ট্যাটিক্যালি কখনোই অ্যাক্সেস করা হয়নি সেগুলোকে কম্পাইল করা JSON ফাইল থেকে রিমুভ করে দেয়। `optimize` যদি `false` থাকে তবে এটি কোনো কাজ করবে না।                       |
 
-| প্রপার্টি      | টাইপ      | ডিফল্ট      | বর্ণনা                                                                                                                                                                                                                    |
-| :------------- | :-------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **`optimize`** | `boolean` | `undefined` | বিল্ড অপ্টিমাইজেশন চালু আছে কিনা তা নিয়ন্ত্রণ করে। যদি `true` হয়, তবে Intlayer ডিকশনারি কলগুলোকে অপ্টিমাইজড ইনজেকশন দ্বারা প্রতিস্থাপন করে। যদি `false` হয়, তবে অপ্টিমাইজেশন বন্ধ থাকে। প্রোডাকশনে `true` সেট করা ভালো। |
-| **`minify`**   | `boolean` | `false`     | বান্ডেল সাইজ কমাতে ডিকশনারিগুলো মিনিফাই করা হবে কিনা।                                                                                                                                                                     |
-| **`purge`**    | `boolean` | `false`     | ডিকশনারিতে অব্যবহৃত কীগুলো মুছে ফেলা হবে কিনা।                                                                                                                                                                            |
+### Minification (ফিল্ডের কী রিনেম করা)
 
-### মিনিফিকেশন (Minification)
+`build.minify` কিন্তু আপনার JavaScript বান্ডেলটিকে **মিনিফাই করে না** — সেটি আপনার বান্ডলার-এর দায়িত্ব। এর পরিবর্তে, এটি আপনার ডিফাইন করা প্রতিটি কন্টেন্ট ফিল্ডের কী-কে ছোট অক্ষরের ছদ্মনাম (alias) দিয়ে রিপ্লেস করে কম্পাইল করা ডিকশনারি JSON ফাইলের সাইজ ছোট করে:
 
-ডিকশনারি মিনিফাই করার ফলে অপ্রয়োজনীয় হোয়াইটস্পেস, কমেন্ট মুছে যায় এবং JSON কন্টেন্টের সাইজ কমে যায়। বড় ডিকশনারির ক্ষেত্রে এটি অত্যন্ত উপযোগী।
+```
+// মিনিফাই করার আগে
+{ "title": "হ্যালো", "subtitle": "বিশ্ব" }
+
+// মিনিফাই করার পরে
+{ "a": "হ্যালো", "b": "বিশ্ব" }
+```
+
+আপনার সোর্স কোডের সব প্রপার্টি অ্যাক্সেসেও একই রিনেম প্রক্রিয়া প্রয়োগ করা হয়, ফলে কম্পাইল করা আউটপুটে `content.title` হয়ে যায় `content.a`। রানটাইমে এর কাজ হুবহু একই থাকে।
 
 ```typescript fileName="intlayer.config.ts"
 import type { IntlayerConfig } from "intlayer";
@@ -318,11 +428,13 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-> দ্রষ্টব্য: যদি `optimize` বন্ধ করা থাকে অথবা যদি ভিজ্যুয়াল এডিটর (Visual Editor) চালু থাকে তবে মিনিফিকেশন কাজ করবে না (কারণ এডিটর ব্যবহারের জন্য পূর্ণ কন্টেন্টের প্রয়োজন হয়)।
+> যখন `optimize` `false` থাকে বা যখন `editor.enabled` `true` থাকে তখন মিনিফিকেশন বাদ দেওয়া হয় (ভিজ্যুয়াল এডিটরের এডিটিং সচল রাখার জন্য অরিজিনাল ফিল্ডের নামগুলো প্রয়োজন)।
+
+> `importMode: 'fetch'` এর মাধ্যমে লোড করা ডিকশনারিগুলোর ক্ষেত্রেও মিনিফিকেশন করা হয় না, কারণ அவற்றின் JSON একটি রিমোট API থেকে অরিজিনাল ফিল্ডের নাম ব্যবহার করে সার্ভ করা হয় — ক্লায়েন্ট-সাইডে কী-গুলোর নাম পরিবর্তন করলে সার্ভার/ক্লায়েন্ট চুক্তি ভেঙে যাবে।
 
-### পার্জিং (Purging)
+### Purging (অব্যবহৃত ফিল্ড সরিয়ে ফেলা)
 
-পার্জিং নিশ্চিত করে যে শুধুমাত্র আপনার কোডে ব্যবহৃত কীগুলোই চূড়ান্ত ডিকশনারি বান্ডেলে অন্তর্ভুক্ত হবে। যদি আপনার কাছে অনেকগুলো কী সম্বলিত বড় ডিকশনারি থাকে যেগুলো অ্যাপ্লিকেশনের সব জায়গায় ব্যবহৃত হয় না, তবে এটি আপনার বান্ডেল সাইজ উল্লেখযোগ্যভাবে কমাতে পারি।
+`build.purge` বিশ্লেষণ করে দেখে আপনার সোর্স কোডে ঠিক কোন কন্টেন্ট ফিল্ডগুলো অ্যাক্সেস করা হচ্ছে এবং কম্পাইল করা JSON ফাইল থেকে বাকি সমস্ত ফিল্ড সরিয়ে দেয়।
 
 ```typescript fileName="intlayer.config.ts"
 import type { IntlayerConfig } from "intlayer";
@@ -336,34 +448,50 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-> দ্রষ্টব্য: যদি `optimize` বন্ধ থাকে তবে পার্জিং কাজ করবে না।
+**উদাহরণ:** পাঁচটি ফিল্ডযুক্ত একটি ডিকশনারি যার মধ্যে মাত্র দুটি ব্যবহৃত হয়েছে:
+
+```
+// purge করার আগে
+{ "title": "…", "subtitle": "…", "cta": "…", "footer": "…", "badge": "…" }
+
+// purge করার পরে (সোর্সে কেবল title + subtitle অ্যাক্সেস করা হয়েছে)
+{ "title": "…", "subtitle": "…" }
+```
+
+> যখন `optimize` `false` থাকে বা `editor.enabled` `true` থাকে তখন Purge বাদ দেওয়া হয়।
+
+> যদি কোনো সোর্স ফাইল পার্স (parse) করা না যায়, অথবা `useIntlayer`-এর রেজাল্ট কোনো ভেরিয়েবলে অ্যাসাইন করে এমনভাবে পাস করা হয় যা স্ট্যাটিক অ্যানালাইজার ট্র্যাক করতে পারে না (যেমন, কোনো অবজেক্টের মধ্যে স্প্রেড করা, অথবা ডিস্ট্রাকচার না করেই প্রপ হিসেবে পাস করা), সেক্ষেত্রে সুরক্ষার খাতিরে Purge প্রক্রিয়াটি এড়িয়ে যাওয়া হয়। এই ধরনের ক্ষেত্রে সম্পূর্ণ ডিকশনারিটি অক্ষত রাখা হয়।
+
+### Import Mode
 
-### ইমপোর্ট মোড (Import Mode)
+অনেক পেজ ও লোকেলের সমন্বয়ে তৈরি বড় অ্যাপ্লিকেশনগুলোর ক্ষেত্রে, JSON আপনার বান্ডেল সাইজের একটি বড় অংশ দখল করতে পারে। Intlayer-এর `importMode` অপশন ব্যবহার করে আপনি নিয়ন্ত্রণ করতে পারবেন ডিকশনারিগুলো কীভাবে লোড হবে।
 
-বড় অ্যাপ্লিকেশনের ক্ষেত্রে অনেকগুলো পেজ এবং লোকাল (locale) থাকলে আপনার JSON ফাইলগুলো বান্ডেল সাইজের একটি বড় অংশ দখল করতে পারে। Intlayer আপনাকে নিয়ন্ত্রণ করতে দেয় কীভাবে ডিকশনারিগুলো লোড হবে।
+### গ্লোবাল ডেফিনেশন (Global definition)
 
-আপনার `intlayer.config.ts` ফাইলে বিশ্বব্যাপী (globally) ডিফল্ট ইমপোর্ট মোড ডিফাইন করা যেতে পারে।
+আপনার `intlayer.config.ts` ফাইলে গ্লোবালি ইমপোর্ট মোড নির্ধারণ করা যেতে পারে।
 
 ```typescript fileName="intlayer.config.ts"
 import type { IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
-  build: {
-    minify: true,
+  dictionary: {
+    importMode: "dynamic", // ডিফল্ট হলো 'static'
   },
 };
 
 export default config;
 ```
 
-পাশাপাশি আপনার `.content.{{ts|tsx|js|jsx|mjs|cjs|json|jsonc|json5}}` ফাইলগুলোতে প্রতিটি ডিকশনারির জন্যও এটি করা যায়।
+### প্রতি-ডিকশনারি ডেফিনেশন (Per-dictionary definition)
+
+আপনি চাইলে নির্দিষ্ট কোনো ডিকশনারির জন্য তার নিজস্ব `.content.{{ts|tsx|js|jsx|mjs|cjs|json|jsonc|json5|md|mdx|yaml|yml}}` ফাইলে গিয়ে ইমপোর্ট মোড ওভাররাইড করতে পারেন।
 
 ```ts
 import { type Dictionary, t } from "intlayer";
 
 const appContent: Dictionary = {
   key: "app",
-  importMode: "dynamic", // ডিফল্ট ইমপোর্ট মোড ওভাররাইড করুন
+  importMode: "dynamic", // ডিফল্ট ইমপোর্ট মোডকে ওভাররাইড করে
   content: {
     // ...
   },
@@ -372,35 +500,35 @@ const appContent: Dictionary = {
 export default appContent;
 ```
 
-| প্রপার্টি        | টাইপ                               | ডিফল্ট     | বর্ণনা                                                                                                             |
-| :--------------- | :--------------------------------- | :--------- | :----------------------------------------------------------------------------------------------------------------- |
-| **`importMode`** | `'static'`, `'dynamic'`, `'fetch'` | `'static'` | **অপ্রচলিত (Deprecated)**: পরিবর্তে `dictionary.importMode` ব্যবহার করুন। ডিকশনারি কীভাবে লোড হবে তা নির্ধারণ করে। |
+| প্রপার্টি        | ধরন                                | ডিফল্ট     | বিবরণ                                                                                                                                     |
+| :--------------- | :--------------------------------- | :--------- | :---------------------------------------------------------------------------------------------------------------------------------------- |
+| **`importMode`** | `'static'`, `'dynamic'`, `'fetch'` | `'static'` | **Deprecated (বাতিলযোগ্য)**: এর পরিবর্তে `dictionary.importMode` ব্যবহার করুন। এটি নির্ধারণ করে ডিকশনারিগুলো কীভাবে লোড হবে (নিচে দেখুন)। |
 
-`importMode` সেটিং ঠিক করে কীভাবে ডিকশনারি কন্টেন্ট আপনার কম্পোনেন্টে যুক্ত করা হবে।
-আপনি এটি `intlayer.config.ts` ফাইলের `dictionary` অবজেক্টের অধীনে গ্লোবালি ডিফাইন করতে পারেন অথবা কোনো নির্দিষ্ট ডিকশনারির জন্য তার `.content.ts` ফাইলে ওভাররাইট করতে পারেন।
+`importMode` সেটিং ঠিক করে দেয় কীভাবে আপনার কম্পোনেন্টে ডিকশনারির কন্টেন্ট যুক্ত হবে। এটি আপনি গ্লোবালি `intlayer.config.ts`-এ `dictionary` অবজেক্টের অধীনে ডিফাইন করতে পারেন, অথবা নির্দিষ্ট ডিকশনারির `.content.ts` ফাইলে গিয়ে তা ওভাররাইড করতে পারেন।
 
-### ১. স্ট্যাটিক মোড (Static Mode - ডিফল্ট)
+### ১. স্ট্যাটিক মোড (Static Mode - `default`)
 
-স্ট্যাটিক মোডে Intlayer `useIntlayer`-কে `useDictionary` দ্বারা প্রতিস্থাপন করে এবং ডিকশনারিটিকে সরাসরি জাভাস্ক্রিপ্ট বান্ডেলে যুক্ত করে।
+স্ট্যাটিক মোডে, Intlayer `useIntlayer` কে `useDictionary` দিয়ে প্রতিস্থাপন করে এবং সরাসরি JavaScript বান্ডেলের মধ্যে ডিকশনারি যুক্ত করে দেয়।
 
-- **সুবিধা:** তাৎক্ষণিক রেন্ডারিং (সিঙ্ক্রোনাস), হাইড্রেশনের সময় আলাদা কোনো নেটওয়ার্ক রিকোয়েস্টের প্রয়োজন হয় না।
-- **অসুবিধা:** বান্ডেলে সংশ্লিষ্ট কম্পোনেন্টের জন্য উপলব্ধ **সবগুলো** ভাষার অনুবাদ অন্তর্ভুক্ত থাকে।
-- **উপযোগিতা:** সিঙ্গেল পেজ অ্যাপ্লিকেশন (SPA)।
+- **সুবিধা (Pros):** তাৎক্ষণিক রেন্ডারিং (সিঙ্ক্রোনাস), হাইড্রেশনের সময় অতিরিক্ত কোনো নেটওয়ার্ক রিকোয়েস্ট হয় না।
+- **অসুবিধা (Cons):** এই বান্ডেলের মধ্যে ওই নির্দিষ্ট কম্পোনেন্টের জন্য **সবগুলো** ভাষার অনুবাদই থেকে যায়।
+- **উপযুক্ত ক্ষেত্র (Best for):** সিঙ্গেল পেজ অ্যাপ্লিকেশন (SPA)।
 
-**কোড পরিবর্তনের উদাহরণ:**
+**রূপান্তরিত কোডের উদাহরণ:**
 
 ```tsx
 // আপনার কোড
 const content = useIntlayer("my-key");
 
-// অপ্টিমাইজ করা কোড (Static)
+// রূপান্তরের পরে অপ্টিমাইজ করা কোডের ইলাস্ট্রেশন (Static)
+// এটি কেবল বোঝানোর সুবিধার্থে দেওয়া হলো, আসল কোডটি অপ্টিমাইজেশনের কারণে কিছুটা ভিন্ন হতে পারে
 const content = useDictionary({
   key: "my-key",
   content: {
     nodeType: "translation",
     translation: {
       en: "My title",
-      fr: "Mon titre",
+      bn: "আমার শিরোনাম",
     },
   },
 });
@@ -408,47 +536,67 @@ const content = useDictionary({
 
 ### ২. ডাইনামিক মোড (Dynamic Mode)
 
-ডাইনামিক মোডে Intlayer `useIntlayer`-কে `useDictionaryAsync` দ্বারা প্রতিস্থাপন করে। এটি বর্তমান লোকাল (locale)-এর নির্দিষ্ট JSON ফাইলকে লেজি-লোড (lazy-load) করতে `import()` ব্যবহার করে।
+ডাইনামিক মোডে, Intlayer `useIntlayer` কে `useDictionaryAsync` দিয়ে প্রতিস্থাপন করে। এটি `import()` মেকানিজম (Suspense-এর মতো) ব্যবহার করে, যাতে শুধুমাত্র বর্তমান লোকেলের JSON-টি নির্দিষ্টভাবে লেজি-লোড করা যায়।
 
-- **সুবিধা:** **ভাষা-স্তরের ট্রি শেকিং (Locale-level tree shaking)।** একজন ব্যবহারকারী ইংরেজি ভার্সন দেখলে _শুধুমাত্র_ ইংরেজি ডিকশনারি ডাউনলোড করবেন। ফ্রেঞ্চ ডিকশনারি কখনোই লোড হবে না।
-- **অসুবিধা:** হাইড্রেশনের সময় প্রতি কম্পোনেন্টে একটি করে নেটওয়ার্ক রিকোয়েস্ট তৈরি হয়।
-- **উপযোগিতা:** বড় টেক্সট ব্লক, আর্টিকেল বা অনেক ভাষা সাপোর্ট করে এমন অ্যাপ্লিকেশন যেখানে বান্ডেল সাইজ অত্যন্ত গুরুত্বপূর্ণ।
+- **সুবিধা (Pros):** **লোকেল-লেভেল ট্রি শেকিং (Locale-level tree shaking)।** যে ইউজার ইংরেজি ভার্সন দেখছেন তিনি _কেবলমাত্র_ ইংরেজি ডিকশনারিটিই ডাউনলোড করবেন। বাংলা ডিকশনারি কখনোই লোড হবে না।
+- **অসুবিধা (Cons):** হাইড্রেশনের সময় প্রতি কম্পোনেন্টে একটি করে নেটওয়ার্ক রিকোয়েস্ট (asset fetch) ফায়ার করে।
+- **উপযুক্ত ক্ষেত্র (Best for):** বড় বড় টেক্সট ব্লক, আর্টিকেল, বা এমন অ্যাপ্লিকেশন যা বহু ভাষা সাপোর্ট করে যেখানে বান্ডেল সাইজ একটি বড় ফ্যাক্টর।
 
-**কোড পরিবর্তনের উদাহরণ:**
+**রূপান্তরিত কোডের উদাহরণ:**
 
 ```tsx
 // আপনার কোড
 const content = useIntlayer("my-key");
 
-// অপ্টিমাইজ করা কোড (Dynamic)
+// রূপান্তরের পরে অপ্টিমাইজ করা কোডের ইলাস্ট্রেশন (Dynamic)
+// এটি কেবল বোঝানোর সুবিধার্থে দেওয়া হলো, আসল কোডটি অপ্টিমাইজেশনের কারণে কিছুটা ভিন্ন হতে পারে
 const content = useDictionaryAsync({
   en: () =>
     import(".intlayer/dynamic_dictionary/my-key/en.json").then(
       (mod) => mod.default
     ),
-  fr: () =>
-    import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
+  bn: () =>
+    import(".intlayer/dynamic_dictionary/my-key/bn.json").then(
       (mod) => mod.default
     ),
 });
 ```
 
-> `importMode: 'dynamic'` ব্যবহার করার সময় যদি একটি পেজে ১০০টি কম্পোনেন্ট `useIntlayer` ব্যবহার করে, তবে ব্রাউজার ১০০টি আলাদা ডাউনলোড রিকোয়েস্ট পাঠাবে। এই রিকোয়েস্টের "তুষারপাত" (waterfall) এড়াতে প্রতিটি ছোট কম্পোনেন্টের পরিবর্তে কম সংখ্যক `.content` ফাইলে কন্টেন্টগুলো গ্রুপ করুন (যেমন: প্রতিটি পেজ সেকশনের জন্য একটি ডিকশনারি)।
+> যখন আপনি `importMode: 'dynamic'` ব্যবহার করছেন, তখন যদি একই পেজে ১০০টি কম্পোনেন্ট `useIntlayer` ব্যবহার করে, তবে ব্রাউজার ১০০টি আলাদা ফেচ (fetch) করার চেষ্টা করবে। রিকোয়েস্টের এই "ওয়াটারফল" এড়াতে, প্রতিটি ছোট কম্পোনেন্টের জন্য একটি করে ফাইল না বানিয়ে, কন্টেন্টগুলোকে কমসংখ্যক `.content` ফাইলে (যেমন, প্রতিটি পেজ সেকশনের জন্য একটি ডিকশনারি) গ্রুপ করে ফেলুন। আপনি একই কী ব্যবহার করে একাধিক `.content` ফাইলও ব্যবহার করতে পারেন। Intlayer সেগুলো একত্র করে একটি সিঙ্গেল ডিকশনারি তৈরি করবে।
 
 ### ৩. ফেচ মোড (Fetch Mode)
 
-এটি ডাইনামিক মোডের মতোই কাজ করে, তবে এটি প্রথমে Intlayer Live Sync API থেকে ডিকশনারিগুলো আনার চেষ্টা করে। যদি API কল ব্যর্থ হয় বা কন্টেন্ট লাইভ আপডেটের জন্য চিহ্নিত করা না থাকে, তবে এটি ডাইনামিক ইমপোর্টে ফিরে যায়।
+এটি ডাইনামিক মোডের মতোই কাজ করে, তবে প্রথমেই Intlayer Live Sync API থেকে ডিকশনারি ফেচ করার চেষ্টা করে। যদি API কলটি ব্যর্থ হয় বা কন্টেন্টটি লাইভ আপডেটের জন্য চিহ্নিত না থাকে, তখন এটি পুনরায় ডাইনামিক ইমপোর্টে (dynamic import) ফিরে যায়।
+
+**রূপান্তরিত কোডের উদাহরণ:**
+
+```tsx
+// আপনার কোড
+const content = useIntlayer("my-key");
+
+// অপ্টিমাইজ করা কোডের ইলাস্ট্রেশন (Fetch)
+const content = useDictionaryAsync({
+  en: () =>
+    fetch("https://intlayer.my-domain.com/dictionary/my-key/en").then((res) =>
+      res.json()
+    ),
+  bn: () =>
+    fetch("https://intlayer.my-domain.com/dictionary/my-key/bn").then((res) =>
+      res.json()
+    ),
+});
+```
 
-> বিস্তারিত জানতে CMS ডকুমেন্ট দেখুন: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/bn/intlayer_CMS.md)
+> আরও বিস্তারিত জানতে CMS ডকুমেন্টেশন দেখুন: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/bn/intlayer_CMS.md)
 
-> ফেচ মোডে পার্জিং (purge) এবং মিনিফিকেশন ব্যবহার করা যায় না।
+> ফেচ মোডে purge বা minification প্রযোজ্য হয় না কারণ JSON একটি রিমোট API থেকে অরিজিনাল ফিল্ডের নামেই পরিবেশন করা হয়।
 
-## সারসংক্ষেপ: স্ট্যাটিক বনাম ডাইনামিক
+## সারসংক্ষেপ: স্ট্যাটিক বনাম ডাইনামিক (Static vs Dynamic)
 
-| ফিচার                         | স্ট্যাটিক মোড                              | ডাইনামিক মোড                              |
-| :---------------------------- | :----------------------------------------- | :---------------------------------------- |
-| **JS বান্ডেল সাইজ**           | তুলনামূলক বড় (সব ভাষা অন্তর্ভুক্ত করে)    | সবচেয়ে ছোট (শুধুমাত্র কোড, কন্টেন্ট নেই) |
-| **প্রাথমিক লোড**              | তাৎক্ষণিক (কন্টেন্ট বান্ডেলের ভেতরেই থাকে) | সামান্য দেরি (JSON ফেচ করে আনে)           |
-| **নেটওয়ার্ক রিকোয়েস্ট**     | ০টি অতিরিক্ত রিকোয়েস্ট                    | ডিকশনারি পিছু ১টি রিকোয়েস্ট              |
-| **ট্রি শেকিং (Tree Shaking)** | কম্পোনেন্ট-স্তরে                           | কম্পোনেন্ট-স্তর + ভাষা-স্তরে              |
-| **উপযোগিতা**                  | UI কম্পোনেন্ট, ছোট অ্যাপ্লিকেশন            | বেশি টেক্সটযুক্ত পেজ, অনেকগুলো ভাষা       |
+| বৈশিষ্ট্য                 | স্ট্যাটিক মোড (Static Mode)                 | ডাইনামিক মোড (Dynamic Mode)                    |
+| :------------------------ | :------------------------------------------ | :--------------------------------------------- |
+| **JS বান্ডেল সাইজ**       | বড় (কম্পোনেন্টের সব ভাষা অন্তর্ভুক্ত থাকে) | সবচেয়ে ছোট (শুধুমাত্র কোড থাকে, কন্টেন্ট নয়) |
+| **প্রাথমিক লোড**          | তাৎক্ষণিক (কন্টেন্ট বান্ডেলের ভেতরেই থাকে)  | সামান্য দেরি হয় (JSON ফেচ করে)                |
+| **নেটওয়ার্ক রিকোয়েস্ট** | 0 (অতিরিক্ত কোনো রিকোয়েস্ট নেই)            | প্রতি ডিকশনারি কী-এর জন্য ১টি রিকোয়েস্ট       |
+| **ট্রি শেকিং**            | কম্পোনেন্ট-লেভেল                            | কম্পোনেন্ট-লেভেল + লোকেল-লেভেল                 |
+| **সেরা ব্যবহারক্ষেত্র**   | UI কম্পোনেন্ট, ছোট অ্যাপ                    | টেক্সট-বহুল পেজ, অনেকগুলো ভাষা                 |