1 
2WebAssembly (WASM) শুরু হয়েছিল ব্রাউজারে C++ চালানোর একটি উপায় হিসেবে। 2026 সালে, এটি সর্বত্র চলে  -  ব্রাউজার, সার্ভার, এজ নেটওয়ার্ক, এমবেডেড ডিভাইস  -  এবং ওয়েবে সবচেয়ে চাহিদাপূর্ণ কিছু অ্যাপ্লিকেশন চালায়। Figma-র রেন্ডারিং ইঞ্জিন, ওয়েবে Adobe Photoshop, Google Meet-এর ভিডিও প্রসেসিং, এবং Cloudflare-এর এজ কম্পিউট প্ল্যাটফর্ম সবই WebAssembly-তে চলে।
3 
4Chrome Platform Status অনুযায়ী 2026 সালের শুরুতে WASM সমস্ত Chrome পেজ লোডের প্রায় 5.5%, যা আগের বছরে 4.5% থেকে বেড়েছে। WASM 3.0 W3C স্ট্যান্ডার্ড হওয়া এবং WASI 1.0-এর দিকে পরিপক্ব হওয়ার সাথে সাথে, ইকোসিস্টেম একটি টার্নিং পয়েন্টে পৌঁছেছে।
5 
6এই গাইড WebAssembly দিয়ে তৈরি শুরু করতে আপনার যা কিছু জানা দরকার তা কভার করে।
7 
8## WebAssembly কী?
9 
10WebAssembly হল একটি বাইনারি ইন্সট্রাকশন ফরম্যাট যা একটি compilation target হিসেবে ডিজাইন করা হয়েছে। আপনি একটি উচ্চ-স্তরের ভাষায় (Rust, C, C++, Go, Kotlin) কোড লেখেন, এটি `.wasm`-এ কম্পাইল করেন, এবং WASM রানটাইম আছে এমন যেকোনো পরিবেশে এটি চালান  -  ব্রাউজার, Node.js, Cloudflare Workers, Wasmtime, বা Wasmer।
11 
12```mermaid
13graph LR
14    Rust[Rust / C / C++] --> Compiler[Compiler]
15    Compiler --> WASM[.wasm Binary]
16    WASM --> Browser[Browser V8/SpiderMonkey]
17    WASM --> Server[Server Wasmtime]
18    WASM --> Edge[Edge Cloudflare Workers]
19    WASM --> Embedded[Embedded WAMR]
20```
21 
22### এটি কীভাবে কাজ করে
23 
24WASM হল একটি **stack-based virtual machine**। ফাংশনগুলি একটি operand stack-এ মান push এবং pop করে। হোস্ট রানটাইম (Chrome-এ V8, Firefox-এ SpiderMonkey) WASM বাইটকোডকে নেটিভ মেশিন কোডে JIT-কম্পাইল করে, যে কারণে পারফরম্যান্স নেটিভের কাছাকাছি।
25 
26মূল বৈশিষ্ট্য:
27 
28- **Sandboxed execution**: WASM মডিউল শুধুমাত্র সেই রিসোর্সগুলো অ্যাক্সেস করতে পারে যা হোস্ট স্পষ্টভাবে প্রদান করে। অনুমতি ছাড়া কোনো ফাইলসিস্টেম, কোনো নেটওয়ার্ক, কোনো OS অ্যাক্সেস নেই। এটি নেটিভ কোড থেকে মৌলিকভাবে আলাদা।
29- **Linear memory**: WASM এবং হোস্টের মধ্যে শেয়ার করা একটি একক সংলগ্ন `ArrayBuffer`। জটিল ডেটা (strings, structs) মেমোরিতে লিখে এবং পয়েন্টার শেয়ার করে পাস করা হয়।
30- **Type-limited**: WASM নেটিভভাবে শুধুমাত্র চারটি টাইপ সাপোর্ট করে: `i32`, `i64`, `f32`, `f64`। বাকি সব কিছুর (strings, arrays, objects) জন্য linear memory বা Component Model-এর মাধ্যমে এনকোডিং প্রয়োজন।
31- **Portable**: একই `.wasm` বাইনারি WASM রানটাইম আছে এমন যেকোনো প্ল্যাটফর্মে পুনরায় কম্পাইলেশন ছাড়াই চলে।
32 
33### WASM বনাম JavaScript
34 
35WASM JavaScript-কে প্রতিস্থাপন করে না। এটি এর পরিপূরক।
36 
37| দিক | JavaScript | WebAssembly |
38|--------|-----------|-------------|
39| **Parsing** | রানটাইমে Parse + compile | প্রি-কম্পাইল্ড বাইনারি, শুধু decode |
40| **Execution speed** | JIT-অপটিমাইজড, পরিবর্তনশীল | নেটিভের কাছাকাছি, সুসংগত |
41| **Startup** | ছোট স্ক্রিপ্টের জন্য দ্রুত | দ্রুত decode, পূর্বানুমানযোগ্য |
42| **DOM access** | সরাসরি | পরোক্ষ (JS গ্লু-এর মাধ্যমে) |
43| **Best for** | UI, DOM manipulation, event handling | CPU-নিবিড় গণনা |
44| **Garbage collection** | বিল্ট-ইন | WasmGC (নতুন), বা ম্যানুয়াল |
45 
46UI এবং DOM কাজের জন্য JavaScript ব্যবহার করুন। ভারী গণনার জন্য WASM ব্যবহার করুন: ইমেজ প্রসেসিং, ভিডিও এনকোডিং, ফিজিক্স সিমুলেশন, ক্রিপ্টোগ্রাফি, ডেটা পার্সিং।
47 
48## WASM 3.0: নতুন কী আছে
49 
50WebAssembly 3.0 সেপ্টেম্বর 2025-এ W3C স্ট্যান্ডার্ড হয়ে ওঠে, বছরের পর বছর ধরে ডেভেলপমেন্টে থাকা নয়টি ফিচারকে স্ট্যান্ডার্ডাইজ করে।
51 
52| ফিচার | এটি কী সক্ষম করে |
53|---------|----------------|
54| **WasmGC** | WASM-এ নেটিভ garbage collection। ম্যানেজড ভাষাগুলি (Java, Kotlin, Dart) তাদের নিজস্ব GC রানটাইম শিপ না করেই WASM-এ কম্পাইল হতে পারে। Chrome 119+, Firefox 120+, Safari 18.2+-এ সাপোর্টেড। |
55| **Exception Handling** | WASM-এ নেটিভ `try`/`catch`। আগে, exceptions-এর জন্য JavaScript-এ ব্যয়বহুল roundtrips প্রয়োজন ছিল। |
56| **Tail Calls** | স্ট্যাক ওভারফ্লো ছাড়া দক্ষ recursion সক্ষম করে। ফাংশনাল ভাষাগুলির জন্য গুরুত্বপূর্ণ। |
57| **Relaxed SIMD** | সমান্তরাল ডেটা প্রসেসিংয়ের জন্য 128-বিট ভেক্টর ইন্সট্রাকশন। হার্ডওয়্যার-নির্দিষ্ট অপটিমাইজেশন সক্ষম করে। |
58| **Memory64** | 4GB linear memory সীমা ভাঙে। বড় আকারের ডেটা প্রসেসিংয়ের জন্য প্রয়োজনীয়। |
59| **Multi-memory** | একটি মডিউলে একাধিক স্বতন্ত্র মেমোরি অঞ্চল। |
60 
61সবচেয়ে প্রভাবশালী হল **WasmGC**। এর আগে, Java বা Kotlin-কে WASM-এ কম্পাইল করার অর্থ ছিল বাইনারির অংশ হিসেবে একটি সম্পূর্ণ garbage collector শিপ করা, যা ফাইল সাইজ বাড়িয়ে দিত। এখন ব্রাউজারের নিজস্ব GC WASM মডিউলের জন্য মেমোরি ম্যানেজমেন্ট সামলায়, ঠিক যেমন এটি JavaScript-এর জন্য করে।
62 
63## WASI: ব্রাউজারের বাইরে WebAssembly
64 
65ব্রাউজারে WASM শক্তিশালী, কিন্তু **WASI (WebAssembly System Interface)** হল যা WASM-কে একটি সার্বজনীন রানটাইম করে তোলে। WASI সিস্টেম রিসোর্সের জন্য স্ট্যান্ডার্ডাইজড ইন্টারফেস প্রদান করে  -  ফাইল, নেটওয়ার্কিং, ক্লক, র‍্যান্ডম নম্বর  -  যা WASM মডিউলকে ব্রাউজারের বাইরে চলতে দেয়।
66 
67```mermaid
68graph TD
69    subgraph "Browser"
70        B[WASM Module] --> Web[Web APIs\nDOM, Fetch, Canvas]
71    end
72 
73    subgraph "Server / Edge / Embedded"
74        S[WASM Module] --> WASI[WASI Interfaces]
75        WASI --> FS[wasi:filesystem]
76        WASI --> Net[wasi:sockets]
77        WASI --> HTTP[wasi:http]
78        WASI --> Clock[wasi:clocks]
79        WASI --> Rand[wasi:random]
80    end
81```
82 
83WASI Preview 2 (বর্তমান স্থিতিশীল রিলিজ) এই ইন্টারফেসগুলি সংজ্ঞায়িত করে:
84 
85- `wasi:filesystem`  -  capability handles-এর মাধ্যমে ফাইল অপারেশন (ঐতিহ্যবাহী file descriptors নয়)
86- `wasi:sockets`  -  TCP/UDP নেটওয়ার্কিং
87- `wasi:http`  -  HTTP request/response হ্যান্ডলিং
88- `wasi:clocks`  -  wall clock, monotonic clock
89- `wasi:random`  -  ক্রিপ্টোগ্রাফিক র‍্যান্ডমনেস
90- `wasi:cli`  -  কমান্ড-লাইন আর্গুমেন্ট, এনভায়রনমেন্ট ভেরিয়েবল, stdio
91 
92মূল নীতি হল **capability-based security**: একটি WASM মডিউল ফাইলসিস্টেম অ্যাক্সেস করতে পারে না যদি না হোস্ট স্পষ্টভাবে একটি নির্দিষ্ট ডিরেক্টরির জন্য হ্যান্ডেল প্রদান করে। এটি WASI-কে নেটিভ executables চালানোর চেয়ে মৌলিকভাবে বেশি নিরাপদ করে তোলে।
93 
94### WASI 1.0-এর পথ
95 
96WASI 0.3.0 (async/concurrency primitives যোগ করা) 2026 সালে প্রত্যাশিত, এরপর WASI 1.0 আসবে। প্রধান সংযোজন হল zero-copy streaming I/O সহ language-integrated async।
97 
98## Component Model
99 
100কোর WASM মডিউল শুধুমাত্র সংখ্যা বিনিময় করতে পারে। **Component Model** WASM-এর উপরে একটি সমৃদ্ধ type system এবং composability স্তর যোগ করে এই সীমাবদ্ধতা সমাধান করে।
101 
102### WIT (WebAssembly Interface Types)
103 
104WIT একটি Interface Definition Language যা components-কে তাদের imports এবং exports সমৃদ্ধ টাইপ দিয়ে ঘোষণা করতে দেয়  -  strings, records, lists, variants, enums  -  শুধু `i32` এবং `f64` নয়।
105 
106```wit
107// calculator.wit
108package myorg:calculator@1.0.0;
109 
110interface operations {
111    record calculation {
112        expression: string,
113        result: f64,
114        timestamp: u64,
115    }
116 
117    add: func(a: f64, b: f64) -> f64;
118    multiply: func(a: f64, b: f64) -> f64;
119    history: func() -> list<calculation>;
120}
121 
122world calculator {
123    export operations;
124}
125```
126 
127`wit-bindgen`-এর মতো টুলচেইন WIT ফাইল থেকে ভাষা-নির্দিষ্ট বাইন্ডিং তৈরি করে। একটি Rust component এবং একটি Python component WIT চুক্তির মাধ্যমে strings, records, এবং lists বিনিময় করতে পারে কোনো পক্ষই অন্য পক্ষের implementation ভাষা না জেনে।
128 
129## Rust দিয়ে আপনার প্রথম WASM মডিউল তৈরি করা
130 
131Rust-এ সবচেয়ে পরিপক্ব WASM টুলিং আছে। আসুন একটি ব্যবহারিক উদাহরণ তৈরি করি: একটি ইমেজ প্রসেসিং মডিউল যা ব্রাউজারে চলে।
132 
133### সেটআপ
134 
135```bash
136# Install the WASM target for Rust
137rustup target add wasm32-unknown-unknown
138 
139# Install wasm-pack (builds Rust to WASM + generates JS bindings)
140cargo install wasm-pack
141 
142# Create a new library project
143cargo new --lib image-processor
144cd image-processor
145```
146 
147### Cargo.toml কনফিগার করুন
148 
149```toml
150[package]
151name = "image-processor"
152version = "0.1.0"
153edition = "2021"
154 
155[lib]
156crate-type = ["cdylib"]
157 
158[dependencies]
159wasm-bindgen = "0.2"
160```
161 
162### Rust কোড লিখুন
163 
164```rust
165// src/lib.rs
166use wasm_bindgen::prelude::*;
167 
168/// Convert an image buffer to grayscale.
169/// Input: RGBA pixel data as a flat u8 array (4 bytes per pixel).
170/// Output: Modified in place for zero-copy performance.
171#[wasm_bindgen]
172pub fn grayscale(pixels: &mut [u8]) {
173    for chunk in pixels.chunks_exact_mut(4) {
174        let r = chunk[0] as f32;
175        let g = chunk[1] as f32;
176        let b = chunk[2] as f32;
177        // ITU-R BT.709 luminance coefficients
178        let gray = (0.2126 * r + 0.7152 * g + 0.0722 * b) as u8;
179        chunk[0] = gray;
180        chunk[1] = gray;
181        chunk[2] = gray;
182        // chunk[3] is alpha, leave unchanged
183    }
184}
185 
186/// Adjust brightness of an image.
187/// factor > 1.0 brightens, < 1.0 darkens.
188#[wasm_bindgen]
189pub fn adjust_brightness(pixels: &mut [u8], factor: f32) {
190    for chunk in pixels.chunks_exact_mut(4) {
191        chunk[0] = ((chunk[0] as f32 * factor).min(255.0)) as u8;
192        chunk[1] = ((chunk[1] as f32 * factor).min(255.0)) as u8;
193        chunk[2] = ((chunk[2] as f32 * factor).min(255.0)) as u8;
194    }
195}
196 
197/// Invert all colors in the image.
198#[wasm_bindgen]
199pub fn invert(pixels: &mut [u8]) {
200    for chunk in pixels.chunks_exact_mut(4) {
201        chunk[0] = 255 - chunk[0];
202        chunk[1] = 255 - chunk[1];
203        chunk[2] = 255 - chunk[2];
204    }
205}
206 
207/// Calculate the average brightness of an image (0-255).
208#[wasm_bindgen]
209pub fn average_brightness(pixels: &[u8]) -> f32 {
210    let mut total: f64 = 0.0;
211    let pixel_count = pixels.len() / 4;
212    for chunk in pixels.chunks_exact(4) {
213        let luminance = 0.2126 * chunk[0] as f64
214            + 0.7152 * chunk[1] as f64
215            + 0.0722 * chunk[2] as f64;
216        total += luminance;
217    }
218    (total / pixel_count as f64) as f32
219}
220```
221 
222### বিল্ড
223 
224```bash
225wasm-pack build --target web
226```
227 
228এটি একটি `pkg/` ডিরেক্টরি তৈরি করে যাতে আছে:
229- `image_processor_bg.wasm`  -  কম্পাইল করা WASM বাইনারি
230- `image_processor.js`  -  TypeScript definitions সহ JavaScript গ্লু কোড
231- `package.json`  -  npm-এ প্রকাশ করার জন্য প্রস্তুত
232 
233### JavaScript-এ ব্যবহার করুন
234 
235```html
236<!DOCTYPE html>
237<html>
238<head><title>WASM Image Processor</title></head>
239<body>
240  <canvas id="canvas" width="800" height="600"></canvas>
241  <button onclick="applyGrayscale()">Grayscale</button>
242  <button onclick="applyBrightness()">Brighten</button>
243  <button onclick="applyInvert()">Invert</button>
244 
245  <script type="module">
246    import init, { grayscale, adjust_brightness, invert } from "./pkg/image_processor.js";
247 
248    let ctx;
249    let imageData;
250 
251    async function setup() {
252      await init();
253      const canvas = document.getElementById("canvas");
254      ctx = canvas.getContext("2d");
255 
256      // Load an image onto the canvas
257      const img = new Image();
258      img.onload = () => {
259        ctx.drawImage(img, 0, 0);
260        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
261      };
262      img.src = "photo.jpg";
263    }
264 
265    window.applyGrayscale = () => {
266      grayscale(imageData.data);
267      ctx.putImageData(imageData, 0, 0);
268    };
269 
270    window.applyBrightness = () => {
271      adjust_brightness(imageData.data, 1.3);
272      ctx.putImageData(imageData, 0, 0);
273    };
274 
275    window.applyInvert = () => {
276      invert(imageData.data);
277      ctx.putImageData(imageData, 0, 0);
278    };
279 
280    setup();
281  </script>
282</body>
283</html>
284```
285 
286মূল অন্তর্দৃষ্টি: `imageData.data` একটি `Uint8ClampedArray` যা একটি `ArrayBuffer` দ্বারা সমর্থিত। WASM-এ পাস করা হলে, এটি একই মেমোরি শেয়ার করে  -  কোনো কপি নেই। Rust ফাংশন পিক্সেলগুলি in place পরিবর্তন করে, এবং JavaScript পক্ষ তাৎক্ষণিকভাবে পরিবর্তনগুলি দেখে।
287 
288## নিম্ন স্তর: ম্যানুয়াল WASM Instantiation
289 
290আপনি যদি `wasm-bindgen` ব্যবহার করতে না চান, তাহলে সরাসরি WASM মডিউল instantiate করতে পারেন:
291 
292```javascript
293const response = await fetch("calculator.wasm");
294const { instance } = await WebAssembly.instantiateStreaming(response, {
295  env: {
296    // Functions the WASM module can call
297    log_result: (value) => console.log("Result:", value),
298  },
299});
300 
301// Call exported functions
302const { add, multiply } = instance.exports;
303console.log(add(5, 3));       // 8
304console.log(multiply(4, 7));  // 28
305```
306 
307এটি তখন উপযোগী যখন আপনি ন্যূনতম ওভারহেড চান এবং সমৃদ্ধ type interop-এর প্রয়োজন নেই।
308 
309## পারফরম্যান্স: WASM বনাম JavaScript
310 
311বাস্তব বেঞ্চমার্ক CPU-নিবিড় কাজের জন্য উল্লেখযোগ্য স্পিডআপ দেখায়:
312 
313| কাজ | JavaScript | WASM | স্পিডআপ |
314|------|-----------|------|---------|
315| 4K ইমেজ প্রসেসিং | 180ms | 8ms (SIMD সহ) | 22x |
316| ইমেজ resize (4K) | 250ms | 45ms | 5.5x |
317| ফিজিক্স সিমুলেশন (10K entities) | ফ্রেম ড্রপ | স্মুথ 60fps | ~10x |
318| JSON পার্সিং (বড় payload) | 12ms | 3ms | 4x |
319| ক্রিপ্টোগ্রাফিক হ্যাশিং | 45ms | 6ms | 7.5x |
320 
321WASM নেটিভ কোডের প্রায় 95% গতিতে চলে। সবচেয়ে বড় লাভ আসে:
322- পূর্বানুমানযোগ্য পারফরম্যান্স (কোনো JIT warmup নেই, কোনো GC pauses নেই)
323- সমান্তরাল ডেটা প্রসেসিংয়ের জন্য SIMD instructions
324- garbage collector হস্তক্ষেপ ছাড়া direct memory access
325 
326যেখানে WASM দ্রুত নয়: DOM manipulation, ছোট গণনা, I/O-bound কাজ। এগুলির জন্য JavaScript ইতিমধ্যে অপটিমাইজড।
327 
328## প্রোডাকশন ব্যবহারের কেস
329 
330### Figma: রিয়েল-টাইম ভেক্টর রেন্ডারিং
331 
332Figma-র কোর রেন্ডারিং ইঞ্জিন হল C++ যা WASM-এ কম্পাইল করা হয়েছে। প্রতিটি shape, gradient, এবং effect WASM-এ গণনা করা হয় এবং একটি Canvas element-এ আঁকা হয়। এটি Figma-কে ব্রাউজারে হাজার হাজার layers সহ জটিল ডিজাইন 60fps-এ হ্যান্ডেল করতে দেয়  -  এমন পারফরম্যান্স যা শুদ্ধ JavaScript-এ অসম্ভব হতো।
333 
334### ওয়েবে Adobe Photoshop
335 
336Adobe Rust ব্যবহার করে মূল Photoshop ফিল্টার এবং টুলগুলি WASM-এ পোর্ট করেছে। তাদের বেঞ্চমার্ক WASM SIMD দিয়ে 22ms-এ 4K ইমেজ প্রসেসিং দেখায় বনাম JavaScript-এ 180ms  -  8x উন্নতি যা রিয়েল-টাইম ফিল্টার প্রিভিউ সম্ভব করে।
337 
338### Cloudflare Workers
339 
340Cloudflare 330+ এজ লোকেশনে V8 isolates-এ WASM মডিউল চালায়। Cold starts হল 1-5ms (container-based serverless-এর জন্য 100-500ms-এর তুলনায়)। ফেব্রুয়ারি 2026-এ, তারা WASM ব্যবহার করে তাদের এজ নেটওয়ার্কে Llama-3-8b inference ডিপ্লয় করেছে।
341 
342### Google Meet
343 
344Google Meet-এ ব্যাকগ্রাউন্ড ব্লার এবং ভার্চুয়াল ব্যাকগ্রাউন্ড রিয়েল-টাইম ভিডিও প্রসেসিংয়ের জন্য SIMD সহ WASM ব্যবহার করে। WASM মডিউল প্রতিটি ভিডিও ফ্রেম যথেষ্ট দ্রুত প্রসেস করে 30fps-এ স্মুথ ভিডিও বজায় রাখতে।
345 
346## ব্রাউজার সাপোর্ট (2026)
347 
348| ফিচার | Chrome | Firefox | Safari | Edge |
349|---------|--------|---------|--------|------|
350| Core WASM | সম্পূর্ণ | সম্পূর্ণ | সম্পূর্ণ | সম্পূর্ণ |
351| Threads | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
352| SIMD (128-bit) | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
353| WasmGC | 119+ | 120+ | 18.2+ | হ্যাঁ |
354| Exception Handling | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
355| Memory64 | হ্যাঁ | হ্যাঁ | আংশিক | হ্যাঁ |
356 
357সমস্ত প্রধান ব্রাউজার সম্পূর্ণভাবে WASM সাপোর্ট করে। নতুন ফিচারগুলি (WasmGC, Exception Handling) ব্যাপক প্রাপ্যতায় পৌঁছেছে।
358 
359## টুলিং রেফারেন্স
360 
361| টুল | উদ্দেশ্য | ইনস্টল |
362|------|---------|---------|
363| **wasm-pack** | Rust-কে WASM-এ বিল্ড করুন, npm প্যাকেজ তৈরি করুন | `cargo install wasm-pack` |
364| **wasm-bindgen** | Rust/JS interop bindings (wasm-pack দ্বারা ব্যবহৃত) | Cargo.toml-এ Dependency |
365| **wasm-opt** | বাইনারি সাইজ অপটিমাইজেশন (50%+ হ্রাস) | Binaryen-এর অংশ: `brew install binaryen` |
366| **wit-bindgen** | WIT ফাইল থেকে bindings তৈরি করুন | `cargo install wit-bindgen-cli` |
367| **Wasmtime** | সার্ভার-সাইড WASM রানটাইম (রেফারেন্স WASI implementation) | `brew install wasmtime` |
368| **Wasmer** | WASI সাপোর্ট সহ বিকল্প WASM রানটাইম | `curl https://get.wasmer.io -sSfL \| sh` |
369| **wasm-feature-detect** | রানটাইম ব্রাউজার ফিচার ডিটেকশন | `npm install wasm-feature-detect` |
370 
371### বাইনারি সাইজ অপটিমাইজেশন
372 
373WASM বাইনারি বড় হতে পারে। এগুলি ছোট করার উপায়:
374 
375```toml
376# Cargo.toml
377[profile.release]
378opt-level = "z"     # Optimize for size
379lto = true          # Link-time optimization
380codegen-units = 1   # Better optimization, slower compile
381strip = true        # Strip debug symbols
382```
383 
384```bash
385# Build in release mode
386wasm-pack build --release --target web
387 
388# Further optimize with wasm-opt
389wasm-opt -Oz pkg/image_processor_bg.wasm -o pkg/image_processor_bg.wasm
390```
391 
392একটি সাধারণ Rust WASM মডিউল এই অপটিমাইজেশনগুলির সাথে 500KB থেকে 50KB-র নিচে নেমে আসে।
393 
394## শুরু করার রোডম্যাপ
395 
396```mermaid
397flowchart TD
398    A[Week 1: Basics] --> B[Week 2: Real Project]
399    B --> C[Week 3: WASI and Server-side]
400    C --> D[Month 2+: Production]
401 
402    A --> A1[Install Rust + wasm-pack]
403    A --> A2[Build hello-world WASM module]
404    A --> A3[Call WASM functions from JavaScript]
405 
406    B --> B1[Build image processor or game physics]
407    B --> B2[Use wasm-bindgen for rich types]
408    B --> B3[Benchmark against pure JS]
409 
410    C --> C1[Run WASM with Wasmtime]
411    C --> C2[Explore WASI interfaces]
412    C --> C3[Try Component Model with WIT]
413 
414    D --> D1[Optimize binary size]
415    D --> D2[Use SIMD for parallelism]
416    D --> D3[Deploy to Cloudflare Workers or browser]
417```
418 
419## উপসংহার
420 
421WebAssembly আর পরীক্ষামূলক নয়। এটি একটি প্রোডাকশন প্রযুক্তি যা ওয়েবে সবচেয়ে চাহিদাপূর্ণ কিছু অ্যাপ্লিকেশন ব্যবহার করে। নেটিভের কাছাকাছি পারফরম্যান্স, sandboxed নিরাপত্তা, এবং সার্বজনীন পোর্টেবিলিটি  -  অন্য কোনো compilation target আপনাকে এই তিনটিই দেয় না।
422 
423আপনাকে WASM-এ আপনার পুরো অ্যাপ্লিকেশন পুনরায় লিখতে হবে না। একটি একক CPU-নিবিড় ফাংশন দিয়ে শুরু করুন  -  একটি ইমেজ ফিল্টার, একটি ডেটা পার্সার, একটি ফিজিক্স ক্যালকুলেশন  -  এটি WASM-এ কম্পাইল করুন, এবং JavaScript থেকে কল করুন। পার্থক্য পরিমাপ করুন। তারপর সিদ্ধান্ত নিন WASM আর কোথায় সাহায্য করতে পারে।
424 
425টুলিং পরিপক্ব, ব্রাউজার সাপোর্ট সার্বজনীন, এবং ইকোসিস্টেম বাড়ছে। আপনি যদি Rust লেখেন, আপনি ইতিমধ্যে ব্রাউজার থেকে একটি কমান্ড দূরে।
426 
427> **শুরু করার চেকলিস্ট:**
428>
429> - [x] Rust এবং wasm-pack ইনস্টল করা হয়েছে
430> - [x] প্রথম WASM মডিউল তৈরি এবং ব্রাউজারে চলছে
431> - [x] JavaScript interop কাজ করছে (JS থেকে WASM কল করা)
432> - [x] সাইজ অপটিমাইজেশন সহ release build প্রয়োগ করা হয়েছে
433> - [x] শুদ্ধ JavaScript সমতুল্যের বিপরীতে পারফরম্যান্স বেঞ্চমার্ক করা হয়েছে
434> - [x] সার্ভার-সাইড ব্যবহারের কেসের জন্য Wasmtime দিয়ে WASI অন্বেষণ করা হয়েছে
435