Build আর bundle — Vite, tree shaking আর code splitting

১ · Bundler কী করে, আর কেন লাগে

ডাকঘরের বাছাইঘরের কথা ভাবুন। সারা দিনে হাজার চিঠি আসে, প্রতিটি আলাদা ঠিকানায়। ডাকপিয়ন প্রতিটি চিঠি আলাদা করে পৌঁছাতে গেলে দিন শেষ হবে না। তাই বাছাইঘরে চিঠি এলাকা ধরে বস্তায় ভরা হয়, প্রতিটি বস্তায় লেবেল লাগে, আর একটি গাড়ি একবারে একটি এলাকার বস্তা নিয়ে যায়। Bundler আপনার কোডের সাথে ঠিক এই কাজটি করে।

“বাজারঘর”-এর ছোট React সংস্করণেও vite build বলেছে 395 modules transformed. মানে আপনার নিজের ছয়-সাতটি ফাইল, আর React, React DOM ও চার্ট library-র ভেতরের শত শত ফাইল। এগুলো আলাদা করে browser-এ পাঠালে প্রতিটির জন্য একটি request, আর প্রতিটি import খুঁজতে আরও এক ধাপ অপেক্ষা। Bundler এর বদলে তিনটি কাজ করে:

1. Graph বানানো। Entry ফাইল, যেমন main.jsx, থেকে শুরু করে প্রতিটি import অনুসরণ করে। ফলে পায় একটি module graph: কে কাকে ডাকে তার পুরো জাল।
2. অনুবাদ। Browser JSX বা TypeScript বোঝে না। Bundler সেগুলো সাধারণ JavaScript-এ transpile করে, CSS আর ছবিও প্রক্রিয়া করে।
3. অনেক থেকে কয়েকটি। অব্যবহৃত কোড বাদ দেয়, বাকিটা কয়েকটি chunk-এ ভাগ করে, ছোট করে, আর ফাইলের নামে content hash বসিয়ে লেখে।

নিচের ব্লকটি একটি খেলনা bundler. মেমরিতে চারটি ফাইল আছে। সে graph হাঁটে, dependency আগে রেখে ক্রম ঠিক করে, তারপর সবকিছু একটি স্ট্রিং-এ জুড়ে চালায়। আসল bundler এর চেয়ে অনেক বেশি করে, কিন্তু মূল ধারণা এটুকুই।

// চার ফাইলের ছোট্ট "বাজারঘর": মেমরিতে রাখা
const files = {
  'main.js':  "import { App } from './app.js'; App();",
  'app.js':   "import { formatTaka } from './money.js'; import { cart } from './cart.js';\nexport function App() { console.log('ঝুড়ি:', formatTaka(cart.total())); }",
  'cart.js':  "import { vat } from './money.js';\nexport const cart = { total: () => 270 + vat(270) };",
  'money.js': "export const vat = n => Math.round(n * 0.15);\nexport const formatTaka = n => n + ' টাকা';",
};
const order = [], seen = new Set();
function visit(file, depth) {
  if (seen.has(file)) return console.log(' '.repeat(depth * 2) + file + ' (আগেই দেখা)');
  seen.add(file);
  console.log(' '.repeat(depth * 2) + file);
  const deps = [...files[file].matchAll(/from '\.\/([\w.]+)'/g)].map(m => m[1]);
  deps.forEach(d => visit(d, depth + 1));
  order.push(file);                       // সব dependency-র পরে নিজে
}
visit('main.js', 0);
console.log('ক্রম:', order.join(' → '));
// প্রতিটি module একটি function-এ; import/export বদলে একটি ভাগ করা খাতায়
let out = 'const mod = {};\n';
for (const f of order) {
  const body = files[f]
    .replace(/import \{([^}]+)\} from '[^']+';/g, (_, names) => `const {${names}} = mod;`)
    .replace(/export (const|function) (\w+)/g, (_, kind, name) => `${kind} ${name}`);
  const names = [...files[f].matchAll(/export (?:const|function) (\w+)/g)].map(m => m[1]);
  out += `(function () { ${body}\n Object.assign(mod, { ${names.join(', ')} }); })();\n`;
}
console.log('bundle:', out.length, 'অক্ষর, ফাইল ৪টি থেকে ১টি');
new Function(out)();                       // bundle চালানো

main.js
  app.js
    money.js
    cart.js
      money.js (আগেই দেখা)
ক্রম: money.js → cart.js → app.js → main.js
bundle: 519 অক্ষর, ফাইল ৪টি থেকে ১টি
ঝুড়ি: 311 টাকা

সংক্ষিপ্ত ইতিহাস

JavaScript-এ ২০১৫ সালের আগে ভাষার নিজস্ব module ছিল না। তাই bundler-এর ইতিহাস আসলে module-এর ইতিহাস। নিচের সাল আনুমানিক, প্রথম প্রকাশ বা ঘোষণার সময় ধরে।

একটি প্রবণতা পরিষ্কার: টুলগুলো JavaScript থেকে Go আর Rust-এ সরেছে। কারণ bundler-এর কাজ মূলত parse আর রূপান্তর, যা ভারী CPU-র কাজ, আর নেটিভ ভাষায় সমান্তরালে চালানো সহজ।

২ · Vite 8: dev-এ native ESM, build-এ Rolldown

পর্ব ০৫-এ আপনি dev, build আর preview তিনটি মোড চালিয়েছেন। এবার ভেতরে তাকাই। লেখার সময়ে Vite 8.3.5 চলছে। Vite-এর docs অনুযায়ী Vite 8 আগের দুই টুলের (dev-এ esbuild, build-এ Rollup) জায়গায় Rolldown আর Oxc নিয়েছে। কোড অনুবাদ আর minify করে Oxc, CSS minify করে Lightning CSS. পুরোনো build.rollupOptions এখন build.rolldownOptions-এর deprecated নাম।

Dev: browser নিজেই ফাইল চায়

Dev server পুরো অ্যাপ bundle করে না। Browser যে ফাইল চায়, শুধু সেটি অনুবাদ করে পাঠায়। নিচে আমাদের dev server-এ একটি ফাইল সরাসরি চাওয়া হলো (সত্যিকারের run, Vite 8.3.5, ছোট করা):

$ npx vite --port 5791 --host 127.0.0.1
  VITE v8.3.5  ready in 195 ms

$ curl -s http://127.0.0.1:5791/src/App.jsx
import Home from "/src/routes/Home.jsx";
import logoUrl from "/src/assets/logo.svg?import&url";
import __vite__cjsImport3_react_jsxDevRuntime from "/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=065e0134";
const Cart = lazy(_c = () => import("/src/routes/Cart.jsx"));
…

তিনটি জিনিস লক্ষ করুন। JSX আর নেই, সাধারণ JavaScript হয়ে গেছে। import-গুলো এখনো import, শুধু পথ পুরো URL হয়েছে, কারণ browser নিজেই এগুলো চাইবে। আর React এসেছে .vite/deps থেকে: Vite প্রথমবার চালানোর সময় dependency-গুলো একবার আগে থেকে bundle করে রাখে (dependency pre-bundling), নইলে React-এর শত ফাইল আলাদা request হতো।

Edge-এ হোম পাতা খুলে request গুনলাম (Playwright দিয়ে, একটি স্থানীয় run):

Dev-এ বেশি request আর বড় ফাইল কোনো সমস্যা নয়, কারণ সব আপনার নিজের যন্ত্রে। লাভ হলো, একটি ফাইল বদলালে শুধু সেটি নতুন করে অনুবাদ হয়, আর HMR সেটি পাতায় বসায়। খুব বড় অ্যাপে অবশ্য হাজার module-এর request নিজেই ধীর হয়ে যায়। Vite 8.1 (জুন ২০২৬) তাই পরীক্ষামূলক experimental.bundledDev এনেছে, যা dev-এও bundle করে। লেখার সময়ে এটি পরীক্ষামূলক।

Build: পুরো bundle

$ npx vite build
vite v8.3.5 building client environment for production...
✓ 395 modules transformed.
dist/index.html                   0.36 kB │ gzip:   0.28 kB
dist/assets/index-CBkHMBcy.css    5.71 kB │ gzip:   1.94 kB
dist/assets/Cart-BMN0ET_r.js      0.41 kB │ gzip:   0.32 kB
dist/assets/index-DL0ZPs8R.js   223.66 kB │ gzip:  70.53 kB
dist/assets/Admin-BV9UnW_S.js   348.45 kB │ gzip: 100.92 kB
✓ built in 174ms

প্রতিটি লাইনে দুটি সংখ্যা। প্রথমটি minify করা ফাইলের আকার, দ্বিতীয়টি gzip করলে কত, যা নেটওয়ার্কে মোটামুটি যাবে। Browser-কে অবশ্য unzip করা পুরো 223.66 kB parse করতে হয়, তাই দুটিই গুরুত্বপূর্ণ। Cart আর Admin আলাদা কারণ App.jsx-এ তারা lazy(() => import(…)), যা পর্ব ২৩-এ দেখেছেন। নামের মাঝের DL0ZPs8R হলো content hash, যা ৫ নম্বর অংশে খুলব।

৩ · Tree shaking: ES module বনাম CommonJS

গাছ ঝাঁকালে শুকনো পাতা পড়ে যায়, সবুজ পাতা থাকে। Tree shaking নামটি এখান থেকে: যে কোড কেউ ব্যবহার করে না, build সেটি ফেলে দেয়। কিন্তু ঝাঁকানোর আগে জানতে হয় কোন পাতা সবুজ। ES module-এ import { debounce } from '…' লেখা থাকে কোডের ওপরে, স্থির নামে। Build কোড না চালিয়েই বুঝতে পারে কী লাগবে। CommonJS-এ require() একটি সাধারণ ফাংশন ডাক, যা শর্তের ভেতরে থাকতে পারে, নাম চলার সময় তৈরি হতে পারে, আর module.exports যেকোনো সময় বদলাতে পারে। তাই নিশ্চিত হওয়া কঠিন, আর bundler সাধারণত পুরোটাই রাখে।

পরীক্ষা: একই এক লাইনের কাজ, শুধু debounce, তিনভাবে import করে আলাদা vite build. সত্যিকারের run, Vite 8.3.5, lodash আর lodash-es দুটিই 4.18.1:

import { debounce } from 'lodash-es';   // অন্য দুটিতে শুধু এই লাইন আলাদা
window.search = debounce(q => console.log('খোঁজ', q), 300);

একই ফাংশন, প্রায় ২৪ গুণ পার্থক্য। প্রথম সারিতে bundler পুরো lodash.js রেখেছে, কারণ সেটি একটি CommonJS ফাইল, ভেতরে কী লাগবে সে প্রমাণ করতে পারে না। দ্বিতীয় সারিতে আপনি নিজেই ফাইলের পথ দিয়ে বাছাই করেছেন। তৃতীয়টিতে library-র ৬৪২টি ছোট ES module ফাইল পড়া হয়েছে, কিন্তু রাখা হয়েছে শুধু যেগুলো debounce-এর দরকার। মজার দিক: সবচেয়ে ছোট output এসেছে সবচেয়ে বেশি module পড়ে। Build-এর সময় একটু বাড়ে, ব্যবহারকারীর ফোনে কমে।

Tree shaking-এর মূল কাজ দুই ধাপের: entry থেকে যা ব্যবহার হয় তা চিহ্নিত করা, তারপর চিহ্নহীন সব বাদ দেওয়া। কিন্তু একটি ফাঁদ আছে। কিছু কোড শুধু ফাইল লোড হলেই কাজ করে, যেমন ফাইলের ওপরে registerLocale("bn"). এটি কোনো export নয়, কেউ import-ও করে না, তবু বাদ দিলে আচরণ বদলাতে পারে। একে বলে side effect. নিচের মডেলে দুবার একই import, পার্থক্য শুধু package-এর ঘোষণায়:

// একটি utility library: প্রতিটি export-এর আকার (byte) আর সে কাকে ডাকে
const lib = {
  debounce:   { size: 1200, uses: ['now', 'isObject'] },
  throttle:   { size: 400,  uses: ['debounce', 'isObject'] },
  now:        { size: 60,   uses: [] },
  isObject:   { size: 90,   uses: [] },
  cloneDeep:  { size: 9800, uses: ['isObject'] },
  formatDate: { size: 3100, uses: [] },
};
// মডিউলের শীর্ষে একটি কাজ: কেউ import না করলেও চলে
const topLevel = { code: 'registerLocale("bn")', size: 700, sideEffect: true };

function shake(entryImports, sideEffectsFalse) {
  const used = new Set();
  const mark = name => {
    if (used.has(name)) return;
    used.add(name);                          // ধাপ ১: ব্যবহৃত চিহ্নিত করা
    lib[name].uses.forEach(mark);            // ধাপ ২: সে যাকে ডাকে, তাকেও
  };
  entryImports.forEach(mark);
  let bytes = [...used].reduce((s, n) => s + lib[n].size, 0);
  const keepTop = topLevel.sideEffect && !sideEffectsFalse;
  if (keepTop) bytes += topLevel.size;
  const dropped = Object.keys(lib).filter(n => !used.has(n));
  console.log('রাখা:', [...used].join(', ') + (keepTop ? ', ' + topLevel.code : ''));
  console.log('বাদ:', dropped.join(', '), '| মোট', bytes, 'byte');
}
const all = Object.values(lib).reduce((s, x) => s + x.size, 0) + topLevel.size;
console.log('পুরো library:', all, 'byte');
console.log('— import { debounce }');
shake(['debounce'], false);
console.log('— একই import, package বলেছে sideEffects: false');
shake(['debounce'], true);

পুরো library: 15350 byte
— import { debounce }
রাখা: debounce, now, isObject, registerLocale("bn")
বাদ: throttle, cloneDeep, formatDate | মোট 2050 byte
— একই import, package বলেছে sideEffects: false
রাখা: debounce, now, isObject
বাদ: throttle, cloneDeep, formatDate | মোট 1350 byte

import { debounce } from 'utils'
utils-এ ৬টি export, মোট 15,350 byte

✓ debounce   1200
  throttle    400
  now          60
  isObject     90
  cloneDeep  9800
  formatDate 3100

✓ debounce   1200
  throttle    400   debounce-কে ডাকে, উল্টো নয়
✓ now          60
✓ isObject     90
  cloneDeep  9800
  formatDate 3100

registerLocale("bn")   700
sideEffects ঘোষণা নেই → রাখা হলো
sideEffects: false     → বাদ যেত

রাখা: debounce, now, isObject, registerLocale
বাদ: throttle, cloneDeep, formatDate
মোট 2,050 byte (১৩.৪%)

৪ · sideEffects আর barrel file: দুটি নীরব ফাঁদ

যখন sideEffects: false CSS খেয়ে ফেলে

package.json-এর sideEffects একটি প্রতিশ্রুতি। আপনি লিখছেন: “এই package-এর কোনো ফাইল শুধু import হলেই কিছু করে না।” Bundler কথাটি বিশ্বাস করে। এবার একটি ছোট UI kit বানাই, যার index.js একটি থিম CSS টানে আর বোতাম export করে:

// ui-kit/package.json: { "name": "ui-kit", "type": "module", "sideEffects": false }
import './theme.css';          // :root { --brand } আর body-র font
export * from './button.js';   // button.js নিজে import করে './button.css'

অ্যাপ শুধু import { Button } from './ui-kit/index.js' লিখল। Build-এর CSS ফাইল (সত্যিকারের run, Vite 8.3.5):

.btn{color:#fff;background:#059669;border-radius:6px;padding:4px 12px}

বোতামের CSS আছে, কিন্তু theme.css নেই। কোনো warning নেই, কোনো error নেই। Production-এ পাতার font আর রঙের variable হারিয়ে গেছে। কেন? index.js-এর নিজের কোনো কোড নেই, শুধু আবার export. sideEffects: false বলায় bundler সরাসরি button.js-এ চলে গেছে, index.js পুরো বাদ, আর তার সাথে বাদ গেছে তার CSS import.

প্রচলিত পরামর্শ হলো "sideEffects": ["**/*.css"]. আমাদের run-এ শুধু এটুকু দিয়ে থিম ফেরেনি, কারণ CSS ফাইল নয়, বাদ পড়ছিল তাকে import করা index.js. যেটি কাজ করল:

"sideEffects": ["**/*.css", "./index.js"]
→ :root{--brand:#059669}body{font-family:Hind Siliguri,sans-serif}.btn{…}

"sideEffects" ঘোষণা মুছে দিলে
→ :root{--brand:#059669}body{font-family:Hind Siliguri,sans-serif}.btn{…}

আরও পরিষ্কার সমাধান হলো নকশায়: থিম CSS অ্যাপের entry-তে সরাসরি import করুন (import 'ui-kit/theme.css'), অথবা যে component যে CSS চায় সে নিজেই import করুক, যেমন button.js করেছে। শিক্ষা: sideEffects একটি ঘোষণা, যাচাই নয়। ঘোষণা ভুল হলে bundler ভুলটিই নিখুঁতভাবে মানে। তাই এটি বদলালে build-এর CSS ফাইল খুলে চোখে দেখুন।

Barrel file-এর দাম

অনেক প্রজেক্টে lib/index.js থাকে যা সবকিছু আবার export করে, যাতে import { formatTaka } from './lib' লেখা যায়। একে বলে barrel file, যেন একটি পিপের ভেতরে সব জিনিস। আরামদায়ক, কিন্তু খরচ আছে। আমাদের lib-এ চারটি ফাইল: money.js, ৬৪টি জেলার সূচি বানানো districts.js, শীর্ষে window.bazarEvents বসানো analytics.js, আর recharts আবার export করা charts.js. দরকার শুধু formatTaka. সত্যিকারের run:

Barrel দিয়ে আসা output-এ ঢুকে পড়েছে জেলার সূচি বানানোর ফাংশন ডাক আর window.bazarEvents=window.bazarEvents||[]. দুটিই শীর্ষের কোড, bundler প্রমাণ করতে পারেনি এগুলো নিরীহ। Recharts অবশ্য বাদ গেছে, কারণ সে নিজে sideEffects: false ঘোষণা করে। কিন্তু তাকে খুঁজে দেখতে ৩৮৪টি module পড়তে হয়েছে, যেখানে সরাসরি import-এ ৩টি।

Byte-এর পার্থক্য এখানে ছোট, কিন্তু barrel যত বড়, ক্ষতি তত বড়। Vite-এর performance guide-ও বলে, সম্ভব হলে barrel এড়িয়ে সরাসরি import করুন, কারণ dev-এ প্রথম পাতায় দরকারের চেয়ে বেশি ফাইল লোড হয়। Test runner-ও একইভাবে বাড়তি ফাইল পড়ে। সমাধান সহজ: নিজের অ্যাপের ভেতরে সরাসরি ফাইল থেকে import করুন। Barrel রাখুন শুধু প্রকাশিত library-র সামনের দরজায়, আর সেখানে sideEffects সৎভাবে লিখুন।

৫ · Code splitting, vendor chunk আর content hash

পর্ব ২০-এ route ধরে ভাগ করেছেন, পর্ব ২৩-এ lazy দিয়ে মেপেছেন, আর পর্ব ৫২-এ দেখেছেন Next.js server আর client-এর আলাদা bundle বানায়। এখানে প্রশ্ন অন্য: deploy-এর পর ফেরত আসা ক্রেতাকে কতটা আবার নামাতে হয়?

Content hash আর লম্বা cache

ফাইলের নাম index-DL0ZPs8R.js. মাঝের অংশ ফাইলের বিষয়বস্তু থেকে হিসাব করা। বিষয়বস্তু একই থাকলে নাম একই, এক অক্ষর বদলালেও নাম নতুন। তাই server এই ফাইলগুলোকে Cache-Control-এ এক বছর আর immutable দিতে পারে, browser আর কখনো জিজ্ঞেসও করবে না। নতুন কোড এলে নতুন নাম, আর নতুন index.html সেই নামটি লেখে। শর্ত একটিই: index.html নিজে লম্বা সময় cache করা যাবে না। Header-এর বিস্তারিত পর্ব ৮৪-এ, HTTP cache-এর তত্ত্ব Computer Networks কোর্সে।

পরীক্ষা: ঝুড়ির পাতায় “মোট:” বদলে “সর্বমোট:” লিখে আবার build. শুধু একটি শব্দ, একটি ফাইলে। সত্যিকারের run, দুবার build-এর ফাইলের নাম:

আগে                          পরে
index-CBkHMBcy.css            index-CBkHMBcy.css     একই
Cart-BMN0ET_r.js              Cart-BJk1Md97.js       নতুন
index-DL0ZPs8R.js   70.53 kB  index-DA1Y63ug.js      নতুন
Admin-BV9UnW_S.js  100.92 kB  Admin-xb12zKpk.js      নতুন

একটি শব্দ বদলাল, অথচ তিনটি JavaScript ফাইলের নাম নতুন। কারণ দুটি। index-এর ভেতরে লেখা আছে import("./Cart-BJk1Md97.js"), তাই Cart-এর নাম বদলালে index-এর বিষয়বস্তুও বদলায়। আর Admin React-এর কোড নেয় index থেকে, from "./index-….js" লিখে, তাই index-এর নাম বদলালে Admin-ও বদলায়। এই ঢেউকে বলে hash cascade.

Vendor chunk: যা কম বদলায় তা আলাদা

React আর চার্ট library মাসে একবারও হয়তো বদলায় না, আপনার কোড দিনে কয়েকবার বদলায়। তাই এদের আলাদা vendor chunk-এ রাখি। Vite 8-এ Rolldown-এর codeSplitting দিয়ে। Vite-এর migration guide বলে, পুরোনো manualChunks-এর object রূপ আর চলে না, function রূপ deprecated:

export default defineConfig({
  plugins: [react(), tailwindcss()],
  build: {
    rolldownOptions: {
      output: {
        codeSplitting: {
          groups: [
            { name: 'react-vendor', test: /node_modules[\\/](react|react-dom|scheduler)[\\/]/, priority: 20 },
            { name: 'charts', test: /node_modules[\\/]/, priority: 10 },
          ],
        },
      },
    },
  },
});

[\\/] রাখা হয়েছে যাতে Windows-এর \ আর Linux-এর / দুই পথই মেলে। priority বেশি হলে সেই group আগে বাছাই করে, তাই React আগে নিজের ঘরে যায়, বাকি node_modules পরে charts-এ। সত্যিকারের run:

dist/index.html                             0.53 kB │ gzip:   0.33 kB
dist/assets/index-CBkHMBcy.css              5.71 kB │ gzip:   1.94 kB
dist/assets/Admin-lTkbFtzv.js               0.38 kB │ gzip:   0.29 kB
dist/assets/Cart-wKUX_Rsk.js                0.44 kB │ gzip:   0.35 kB
dist/assets/rolldown-runtime-XKyaHtl9.js    0.72 kB │ gzip:   0.42 kB
dist/assets/index-DKzZ158T.js               4.65 kB │ gzip:   2.30 kB
dist/assets/react-vendor-DyYzDaJB.js      218.70 kB │ gzip:  68.26 kB
dist/assets/charts-v0OkwtNT.js            348.25 kB │ gzip: 100.78 kB

main.jsx
├ react-dom/client
├ App.jsx
└ index.css

App.jsx
├ Home.jsx → money.js
├ logo.svg?url (197 B, inline)
└ react
সব প্রথম পাতায় দরকার

lazy(() => import('./Cart.jsx'))  → Cart chunk
lazy(() => import('./Admin.jsx')) → Admin chunk
Admin → recharts, d3, redux …

react, react-dom, scheduler → react-vendor (20)
বাকি node_modules            → charts (10)
money.js: Home আর Cart দুজনেই → index-এ থাকল

হোম:     index 2.30 + vendor 68.26 + runtime 0.42
         + CSS 1.94
ঝুড়ি:    + Cart 0.35
অ্যাডমিন: + Admin 0.29 + charts 100.78

হোম পাতার HTML এখন index চালায় আর rolldown-runtime ও react-vendor-এর জন্য modulepreload দেয়, যাতে browser এগুলো একসাথে নামায়। charts নেই, সে আসবে শুধু অ্যাডমিনে গেলে। আবার সেই একই শব্দ বদলানো হলো:

Cart-wKUX_Rsk.js      → Cart-BebD_hWa.js        নতুন
index-DKzZ158T.js     → index-Bf3hilhL.js       নতুন (2.29 kB gzip)
react-vendor, charts, Admin, rolldown-runtime, CSS → একই

Index এখনো বদলায়, কারণ সে Cart-এর নাম লিখে রাখে। কিন্তু সে এখন 2.29 kB, আর 68 kB-র React cache-এই থাকে। Vite 8.1 এর পরের ধাপও এনেছে: পরীক্ষামূলক build.chunkImportMap. এটি chunk-গুলো স্থির নামে import করে, আর HTML-এর একটি import map browser-কে বলে কোন স্থির নামের আসল hash-যুক্ত ফাইল কোনটি। চালু করে একই পরীক্ষা:

<script type="importmap">{"imports":{"/assets/Cart-KiXb8dQ5.js":"/assets/Cart-DEJzHSEK.js", …}}</script>

Cart-Bc1lE4WC.js      → Cart-DEJzHSEK.js        নতুন
index-D61jEVz2.js     → index-D61jEVz2.js       একই
বাকি সব               → একই

এবার শুধু Cart. বদল ঢুকেছে শুধু HTML-এর import map-এ, আর HTML প্রতিবার নতুন আনা হয়ই। Vite-এর docs-এ এটি experimental, আর experimental.renderBuiltUrl-এর সাথে এখনো চলে না, তাই নিজের অ্যাপে test করে তবেই চালু করুন।

cache-এ:
  index-DL0ZPs8R.js   70.53 kB
  index-CBkHMBcy.css   1.94 kB
Admin, Cart কখনো খোলেননি

Cart.jsx
- মোট:
+ সর্বমোট:
npx vite build → নতুন dist/ → deploy

index.html          নতুন (no-cache)
index-DA1Y63ug.js   cache-এ নেই → 70.53 kB
index-CBkHMBcy.css  cache-এ আছে ✓

index-Bf3hilhL.js   নতুন → 2.29 kB
react-vendor-DyYzDaJB.js  cache ✓ 68.26 kB
rolldown-runtime          cache ✓

index.html-এর import map বদলেছে
index-D61jEVz2.js         cache ✓
react-vendor-Cp0g7DYm.js  cache ✓
হোমের জন্য নতুন JS: 0 kB
Cart-DEJzHSEK.js শুধু ঝুড়িতে গেলে

নিচের ব্লকে একই ধারণা ছোট করে: node:crypto দিয়ে content hash, আর index যদি Cart-এর আসল নাম লেখে বনাম স্থির নাম লেখে।

const { createHash } = require('node:crypto');
const hash = s => createHash('sha256').update(s).digest('base64url').slice(0, 8);

// প্রতিটি chunk-এর নিজের কোড; index জানে Cart কোন নামে আছে
function build(src, useImportMap) {
  const name = {};
  for (const c of ['vendor', 'Cart', 'Admin']) name[c] = `${c}-${hash(src[c])}.js`;
  // import map থাকলে index স্থির নাম লেখে, নইলে hash-সহ আসল নাম
  const cartRef = useImportMap ? 'Cart.js' : name.Cart;
  name.index = `index-${hash(src.index + cartRef)}.js`;
  return name;
}
const v1 = {
  vendor: 'react + react-dom ...', index: 'App() { lazy(() => import(CART)) }',
  Cart: "মোট: {sub}", Admin: 'LineChart ...',
};
const v2 = { ...v1, Cart: "সর্বমোট: {sub}" };     // শুধু একটি লেখা বদল

for (const im of [false, true]) {
  const a = build(v1, im), b = build(v2, im);
  console.log(im ? '— import map সহ' : '— import map ছাড়া');
  for (const k of Object.keys(a)) {
    const changed = a[k] !== b[k];
    console.log(`  ${b[k].padEnd(20)} ${changed ? 'নতুন, আবার নামাতে হবে' : 'একই, cache থেকে'}`);
  }
}

— import map ছাড়া
  vendor-Xo6n1OwK.js   একই, cache থেকে
  Cart-twRNgOtg.js     নতুন, আবার নামাতে হবে
  Admin-h34395ik.js    একই, cache থেকে
  index-xQCsHSRm.js    নতুন, আবার নামাতে হবে
— import map সহ
  vendor-Xo6n1OwK.js   একই, cache থেকে
  Cart-twRNgOtg.js     নতুন, আবার নামাতে হবে
  Admin-h34395ik.js    একই, cache থেকে
  index-WnTbkY4l.js    একই, cache থেকে

Dynamic import-এর আরেকটি ব্যবহার: ভারী কাজ দরকারের সময়

Route ছাড়াও import() একটি ভারী কাজকে ক্লিক পর্যন্ত পিছিয়ে দিতে পারে। যেমন অ্যাডমিনের “Excel-এ নামান” বোতাম:

async function exportOrders(rows) {
  const { buildSheet } = await import('./export/sheet.js');  // আলাদা chunk, ক্লিকের পরে আসে
  const blob = buildSheet(rows);
  // … ডাউনলোড শুরু
}

যে কোড ১০০ জনের মধ্যে ২ জন ব্যবহার করেন, তার দাম ১০০ জনের ফোনে দেওয়া অন্যায্য। তবে মনে রাখুন, import()-এর পথ স্থির স্ট্রিং হলে bundler সেটি আগেই খুঁজে পায়। পথ চলার সময় জোড়া লাগালে bundler জানে না কোন ফাইল ভাগ করতে হবে।

৬ · Minification আর production-এর source map

Minification মানে দর্জির কাপড় কাটার মতো: আকার বদলায়, জামা একই থাকে। ফাঁকা জায়গা, মন্তব্য যায়; formatTaka হয়ে যায় e; অপ্রয়োজনীয় বন্ধনী আর অসম্ভব শাখা বাদ পড়ে। Vite 8-এর default JavaScript minifier Oxc. Docs বলে Oxc, Terser-এর চেয়ে অনেক দ্রুত, তবে সংকোচন একটু কম, আর 'esbuild' option deprecated. আমাদের অ্যাপে চারটি বিকল্প চালালাম, vendor ভাগসহ (একটি স্থানীয় run; Terser 5.51.2, esbuild 0.28.2):

এই অ্যাপে Oxc gzip-এ সবচেয়ে ছোট ফল দিয়েছে, আর Terser প্রায় দশ গুণ সময় নিয়েছে। Docs-এর “সংকোচন একটু কম” কথাটি অন্য কোডে সত্য হতে পারে, তাই এটিকে সাধারণ নিয়ম নয়, একটি run-এর ফল হিসেবে নিন। আর minify না করলে charts প্রায় দ্বিগুণ, এটি সব ক্ষেত্রে সত্য।

Source map: বানান, কিন্তু প্রকাশ্যে দেবেন না

Minify করা কোডে error এলে stack trace বলে at a (index-DKzZ158T.js:1:4521). এটি দিয়ে কিছু বোঝা যায় না। Source map হলো একটি অনুবাদের খাতা, যা minify করা অবস্থানকে মূল ফাইল, লাইন আর নামে ফেরত নেয়। Vite-এ build.sourcemap-এর তিন মান: false (default), true, আর 'hidden'. সত্যিকারের run:

$ npx vite build --sourcemap hidden
dist/assets/Cart-wKUX_Rsk.js                0.44 kB │ gzip:   0.35 kB │ map:     1.06 kB
dist/assets/react-vendor-DyYzDaJB.js      218.70 kB │ gzip:  68.26 kB │ map: 1,043.78 kB
dist/assets/charts-v0OkwtNT.js            348.25 kB │ gzip: 100.78 kB │ map: 1,959.12 kB
…
$ tail -c 40 dist/assets/Cart-wKUX_Rsk.js
… export{a as default};

$ npx vite build --sourcemap
$ tail -c 60 dist/assets/Cart-wKUX_Rsk.js
… export{a as default};
//# sourceMappingURL=Cart-wKUX_Rsk.js.map

true দিলে প্রতিটি ফাইলের শেষে একটি মন্তব্য browser-কে map-এর ঠিকানা দেয়। 'hidden' একই map বানায়, কিন্তু মন্তব্যটি লেখে না, আর hash-ও বদলায় না। Map-এর ভেতরে কী আছে দেখুন:

{"version":3,"file":"Cart-wKUX_Rsk.js","names":["vat",…,"formatTaka"],
 "sources":["../../src/routes/Cart.jsx"],
 "sourcesContent":["import { formatTaka, vat } from '../lib/money.js';\nconst items = …

sourcesContent-এ পুরো মূল কোড, মন্তব্যসহ। Map প্রকাশ্যে থাকলে যে কেউ আপনার পুরো frontend-এর পরিষ্কার কোড, ভেতরের API পথ আর ভুলে রেখে যাওয়া মন্তব্য পড়তে পারে। Frontend-এর কোড এমনিতেই গোপন নয়, তাই এটি নিরাপত্তার দেয়াল নয়, কিন্তু খোঁজার কাজ অনেক সহজ করে দেয়। Secret কখনো client কোডেই থাকা উচিত নয়, সেই নিয়ম পর্ব ৭৮-এর বিষয়।

Production-এর প্রচলিত পথ তাই তিন ধাপের:

1. sourcemap: 'hidden' দিয়ে build.
2. .map ফাইলগুলো error tracking সেবায় পাঠানো, release-এর নামসহ। সেবা তখন stack trace-কে মূল লাইনে অনুবাদ করে দেখায়। পর্ব ৮৩-এ নিজের বানানো error গ্রহণের endpoint দিয়ে এটি বিস্তারিত।
3. Server-এ ওঠানোর আগে dist থেকে .map মুছে ফেলা, অথবা server-এ .map-এর request আটকানো। Deploy-এর পর browser-এ একটি map-এর URL খুলে দেখুন 404 আসে কি না।

৭ · Browser target, polyfill, CSS আর asset

কোন browser-এর জন্য build?

নতুন JavaScript syntax, যেমন ??=, পুরোনো browser বোঝে না। build.target ঠিক করে output কতটা পুরোনো browser-এ চলবে। Vite 8-এর docs অনুযায়ী default 'baseline-widely-available', যা ২০২৬-এর ১ জানুয়ারির হিসাবে Chrome 111, Edge 111, Firefox 114, Safari 16.4. মোটামুটি ২০২৩ সালের শুরুর browser. Next.js 16-এর docs-ও প্রায় একই সীমা বলে: Chrome 111+, Safari 16.4+.

দুটি আলাদা জিনিস গুলিয়ে ফেলবেন না। Syntax (যেমন ?.) build-এ বদলে লেখা যায়। কিন্তু নতুন ফাংশন (যেমন Array.prototype.findLast) পুরোনো browser-এ নেই। তার জন্য লাগে polyfill: বাড়তি কোড যা ফাংশনটি বানিয়ে দেয়। Vite নিজে polyfill যোগ করে না। পুরোনো browser সত্যিই দরকার হলে @vitejs/plugin-legacy (লেখার সময়ে 8.2.3) আছে, যা browserslist-এর প্রশ্ন পড়ে। targets: ['defaults', 'not IE 11'] দিয়ে সত্যিকারের run:

dist/assets/index-legacy-DYXx3tio.js              11.84 kB │ gzip:   3.93 kB
dist/assets/polyfills-legacy-D2ElLikq.js          56.64 kB │ gzip:  19.68 kB
dist/assets/react-vendor-legacy-Cgw2hcRP.js      219.00 kB │ gzip:  68.37 kB
dist/assets/charts-legacy-CNDi_FyC.js            354.91 kB │ gzip: 103.23 kB
dist/index.html                             1.85 kB │ gzip:   0.87 kB
dist/assets/index-Cg_wNzYG.js               4.89 kB │ gzip:   2.40 kB
dist/assets/react-vendor-BteaPEYr.js      218.83 kB │ gzip:  68.27 kB
…
✓ built in 2.76s

প্রতিটি chunk-এর দুটি সংস্করণ, সাথে 19.68 kB gzip-এর polyfill. আধুনিক browser type="module"-এর সংস্করণ নেয়, পুরোনো browser nomodule-এর legacy সংস্করণ, তাই নতুন ফোনের ক্রেতা polyfill-এর দাম দেন না। কিন্তু build সময় প্রায় দশ গুণ, HTML 0.36 থেকে 1.85 kB, আর দুটি পথ test করতে হয়। সিদ্ধান্ত আসা উচিত আপনার ক্রেতাদের আসল browser-এর তথ্য থেকে, অনুমান থেকে নয়। Modern-only build, মানে default target, বেশিরভাগ নতুন অ্যাপের জন্য যুক্তিসংগত শুরু।

CSS আর Tailwind-এর output

CSS-ও bundle হয়। cssCodeSplit default true, তাই lazy chunk-এর CSS আলাদা ফাইলে সেই chunk-এর সাথে আসে। পর্ব ২২-এর Tailwind v4 (লেখার সময়ে 4.3.4) source ফাইলে যে class পায়, শুধু সেগুলোর CSS লেখে। আমাদের পুরো অ্যাপের CSS 5.71 kB, gzip 1.94 kB.

ছবি আর ?url

JavaScript থেকে ছবি import করলে Vite সেটি asset হিসেবে সামলায়। ?url-এর মানে “শুধু URL চাই”। ছোট ফাইল হলে, docs অনুযায়ী assetsInlineLimit-এর 4096 byte-এর নিচে, ফাইলটি base64 হয়ে কোডের ভেতরেই ঢুকে যায়, আলাদা request লাগে না। বড় হলে hash-যুক্ত নামে dist/assets-এ যায়। সত্যিকারের run:

import logoUrl from './logo.svg?url';     // 197 byte
import bannerUrl from './banner.svg?url'; // 5,891 byte
→ logoUrl   = "data:image/svg+xml;base64,PHN2…"
→ bannerUrl = "/assets/banner-CiqKj0VQ.svg"   (gzip 802 B)

Inline করা ছবি আলাদা cache হয় না, JavaScript বদলালে সেটিও আবার নামে। তাই সীমাটি ছোট রাখা যুক্তিসংগত। Product-এর ছবির মতো বড় ও অনেক ছবি bundle-এ নয়, object storage আর image pipeline-এ রাখা ভালো (পর্ব ৬৪)।

৮ · Bundle বিশ্লেষণ আর Next.js 16-এর build

Build-এর শেষে শুধু chunk-এর আকার দেখা যায়, ভেতরে কী আছে তা নয়। পর্ব ২৩-এ আমরা rollup-plugin-visualizer একবার চালিয়েছি। এখানে vendor ভাগের পরের build-এ আবার চালালাম, লেখার সময়ের version 7.1.1. একসাথে দুটি output: দেখার জন্য treemap, script-এর জন্য raw-data:

import { defineConfig, mergeConfig } from 'vite';
import base from './vite.config.js';
import { visualizer } from 'rollup-plugin-visualizer';

export default mergeConfig(base, defineConfig({
  plugins: [
    visualizer({ filename: 'stats.html', template: 'treemap', gzipSize: true }),
    visualizer({ filename: 'stats.json', template: 'raw-data', gzipSize: true }),
  ],
}));

npx vite build -c vite.viz.config.js চালালে 410 kB-র stats.html তৈরি হলো। Browser-এ খুললে একটি treemap: পুরো আয়তক্ষেত্র আপনার সব JavaScript, ভেতরে প্রতিটি chunk একটি বড় ঘর, তার ভেতরে package, তার ভেতরে ফাইল। ঘরের আয়তন আকারের সমান অনুপাতে। আমাদের ছবিতে দুটি ঘর প্রায় সব জায়গা নিয়েছে: বাঁয়ে charts-এ recharts-এর বিশাল ঘর, তার চারপাশে ছোট ছোট d3-এর টুকরো; ডানে react-vendor-এ প্রায় পুরোটাই react-dom. অ্যাপের নিজের কোড এত ছোট যে খুঁজে পেতে zoom করতে হয়। JSON থেকে package ধরে যোগ করলে (rendered মানে minify-এর আগে, আর gzip প্রতিটি module-এর আলাদা, তাই chunk-এর gzip-এর চেয়ে বড়):

react-vendor   react-dom         536.7 kB rendered   101.4 kB gz
charts         recharts          480.0 kB rendered   152.5 kB gz
charts         es-toolkit         30.7 kB rendered    13.9 kB gz
charts         d3-shape           30.3 kB rendered     5.1 kB gz
charts         @reduxjs/toolkit   26.6 kB rendered     6.9 kB gz
charts         d3-scale           26.3 kB rendered     5.4 kB gz
charts         decimal.js-light   25.4 kB rendered     7.0 kB gz
charts         immer              20.4 kB rendered     5.6 kB gz
react-vendor   react              17.1 kB rendered     4.9 kB gz
…

একটি তথ্য চোখে পড়ার মতো: চার্টের জন্য আমরা Redux, Immer আর decimal.js-ও পাঠাচ্ছি, কারণ recharts 3 ভেতরে এগুলো ব্যবহার করে। এগুলো আপনি install করেননি, কিন্তু ব্যবহারকারী নামাচ্ছেন। Visualizer ছাড়া এটি জানা প্রায় অসম্ভব। vite-bundle-visualizer (লেখার সময়ে 1.2.1) একই কাজ config না বদলে এক কমান্ডে করে, তবে এটি আমরা চালাইনি।

Next.js 16: Turbopack আর বদলে যাওয়া build output

Next.js 16 থেকে next build default-এ Turbopack ব্যবহার করে; webpack চাইলে --webpack দিতে হয়। “বাজারঘর”-এর চার পাতার ছোট Next.js সংস্করণে সত্যিকারের run, Next.js 16.4.4:

$ npx next build
▲ Next.js 16.4.4 (Turbopack)
  Creating an optimized production build ...
✓ Compiled successfully in 1122ms
  Running TypeScript ...
  Collecting page data using 6 workers ...
✓ Generating static pages using 6 workers (4/4) in 389ms
  Finalizing page optimization ...

Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /admin
└ ƒ /products/[id]

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

পুরোনো টিউটোরিয়ালে আপনি প্রতিটি route-এর পাশে “Size” আর “First Load JS” দেখবেন। Next.js 16-এ নেই। Upgrade guide বলে, Server Component-এর যুগে এই সংখ্যাগুলো ভুল দিত, Turbopack আর webpack-ও একমত হতো না, তাই সরানো হয়েছে। Route-এর ধরন অবশ্য আছে: ○ মানে build-এ তৈরি static পাতা, ƒ মানে প্রতি request-এ server-এ। এর অর্থ পর্ব ৫৫-এ, আর route-এর গঠন পর্ব ৫১-এ।

তাহলে আকার মাপবেন কীভাবে? দুটি পথ। এক, Next.js 16.1 থেকে Turbopack-এর নিজের analyzer: npx next analyze browser-এ একটি treemap খোলে, server আর client আলাদা করে, আর কোন import শৃঙ্খলে একটি module এসেছে তা দেখায়। --output দিলে ফল ফাইলে লেখে:

$ npx next analyze --output
  Analyzing a production build...
✓ Analyze completed in 1200ms. Results written to ~/bazarghar-next/.next/diagnostics/analyze.

দুই, আসল browser-এ মাপা। next start চালিয়ে Edge-এ প্রতিটি route খুলে নেটওয়ার্কে আসা script গুনলাম (একটি স্থানীয় run; compression চালু):

তিন পাতায় প্রায় একই, কারণ বেশিরভাগই Next.js আর React-এর ভিত্তি। হোমে একটু বেশি, কারণ পাতার Link-গুলো অন্য route আগে থেকে নামায়, যাকে বলে prefetch. অ্যাডমিনের ছোট client component-টি প্রায় কিছুই যোগ করেনি। Client-এর ভার কমানোর আসল হাতিয়ার Next.js-এ server component: যা server-এ চলে, তার library client-এ যায় না (পর্ব ৫২)। Next.js-এর docs আসল route-এর পারফরম্যান্স Lighthouse-এর মতো টুলে মাপার পরামর্শ দেয়, যা পর্ব ৮৪-এর বিষয়।

৯ · Node backend-এর build আর “বাজারঘর”-এর বাজেট

Express API: bundle করব, না সরাসরি চালাব?

Browser-এর মতো server-এ request-এর খরচ নেই, তাই backend-এ bundle বাধ্যতামূলক নয়। প্রশ্ন বরং TypeScript চালানো আর deploy-এর আকার। লেখার সময়ে Node 24.15 দিয়ে “বাজারঘর”-এর ছোট Express 5.3 API তিনভাবে চালালাম। একটি .ts ফাইল, ভেতরে interface আর type-only import:

$ node src/server.ts
200 [{"id":1,"name":"মসুর ডাল ১ কেজি","price":135,"total":155}]

$ npx tsx src/server.ts
200 [{"id":1,"name":"মসুর ডাল ১ কেজি","price":135,"total":155}]

কোনো flag নেই, কোনো warning নেই। Node-এর docs অনুযায়ী type stripping 23.6 আর 22.18 থেকে default-এ চালু, আর 25.2 ও 24.12 থেকে stable. পুরোনো --experimental-strip-types flag তাই আর লাগে না। Node যা করে তা সীমিত: type-এর লেখা ফাঁকা জায়গায় বদলায়, type যাচাই করে না, tsconfig.json পড়ে না, import-এ .ts extension চায়। আর যে TypeScript কোড JavaScript-এ রূপান্তর চায়, তা চলে না:

$ node src/enum-demo.ts
enum Status { Pending, Paid }
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError [ERR_UNSUPPORTED_TYPESCRIPT_SYNTAX]: TypeScript enum is not supported in strip-only mode

Node 26-এ রূপান্তরের পরীক্ষামূলক flag-টিও সরানো হয়েছে, docs তাই বলে। তাই সরাসরি Node-এ চালাতে চাইলে tsconfig-এ erasableSyntaxOnly চালু রাখুন, যাতে editor-ই enum আটকায়। tsx (লেখার সময়ে 4.23.15) ভেতরে esbuild দিয়ে অনুবাদ করে, তাই enum-ও চালায়, আর dev-এ tsx watch সুবিধাজনক। কোনোটিই type যাচাই করে না, তাই CI-তে tsc --noEmit আলাদা চালাতে হয়, যা পর্ব ৮১-এর অংশ।

তৃতীয় পথ bundle. esbuild দিয়ে দুইভাবে, সত্যিকারের run, esbuild 0.28.2:

$ npx esbuild src/server.ts --bundle --platform=node --format=esm \
    --target=node24 --packages=external --minify --sourcemap=external --outfile=dist-ext/server.js
  dist-ext\server.js      425b
  dist-ext\server.js.map  1.6kb
$ node dist-ext/server.js
200 [{"id":1,"name":"মসুর ডাল ১ কেজি","price":135,"total":155}]

$ npx esbuild src/server.ts --bundle --platform=node --format=esm \
    --target=node24 --minify --outfile=dist-all/server.js
  dist-all\server.js  794.3kb
$ node dist-all/server.js
Error: Dynamic require of "tty" is not supported

--packages=external-এ শুধু আপনার কোড bundle হলো, 425 byte; Express তখনো node_modules থেকে আসবে। দ্বিতীয়টিতে Express আর তার সব dependency একটি 794 kB ফাইলে, কিন্তু চলেনি। কারণ Express-এর ভেতরের একটি dependency CommonJS-এ require("tty") ডাকে, আর ESM output-এ require নেই। একই কমান্ড --format=cjs দিয়ে চালালে ঠিকমতো 200 এল। শিক্ষা: পুরো bundle করার আগে output চালিয়ে দেখুন, শুধু build সফল হওয়া যথেষ্ট নয়।

tsup (লেখার সময়ে 9.0.0) একই esbuild-এর ওপর একটি সহজ config দেয়, আর default-এ dependency বাইরে রাখে:

$ npx tsup
CLI tsup v9.0.0
CLI Target: node24
ESM Build start
ESM dist\server.js     681.00 B
ESM dist\server.js.map 1.37 KB
ESM ⚡️ Build success in 17ms

আমাদের API-র production dependency-র গাছে ৬৫টি package. সব ভেতরে নিলে container image ছোট হয়, deploy দ্রুত হয়; পর্ব ৮০-তে Docker-এর multi-stage build আর Cloud & DevOps কোর্সের Dockerfile পর্ব এর সাথে মিলিয়ে দেখবেন। Prisma-র মতো native engine থাকা package সাধারণত বাইরে রাখতে হয়। Next.js-এ একই কাজ করে serverExternalPackages.

“বাজারঘর”-এর build বাজেট

পর্ব ২৩-এ আমরা ধরে নেওয়া নেটওয়ার্কে (200 kB/s, 150 ms RTT, চালানোর খরচ 3 ms/kB) হিসাব করেছিলাম: প্রথম পাতার JavaScript gzip-এ ১৫০ kB, প্রতি route chunk ১০০ kB. এবার আসল build এর বিপরীতে মিলাই। নিচের ব্লক নিজে gzip মাপে, আর বাজেট যাচাই করে:

const zlib = require('node:zlib');
let seed = 42;                                   // নির্দিষ্ট seed: প্রতিবার একই ফল
const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
const word = () => Array.from({ length: 3 + Math.floor(rnd() * 6) },
  () => 'abcdefghijklmnopqrstuvwxyz'[Math.floor(rnd() * 26)]).join('');
// বাস্তবধর্মী minified কোড: ২০০টি component, নাম আর সংখ্যা আলাদা
const comp = () => `function ${word()}(e){let ${word()}=e.${word()}*${Math.floor(rnd() * 900)};` +
  `return jsx("${word()}",{className:"${word()} ${word()}",children:[e.${word()},${word()}(e)]})}\n`;
const files = Array.from({ length: 200 }, comp);
const one = files.join('');

const kb = n => (n / 1000).toFixed(2) + ' kB';
const gz = s => zlib.gzipSync(s, { level: 9 }).length;
const br = s => zlib.brotliCompressSync(s).length;
console.log('এক ফাইল   raw', kb(one.length), '| gzip', kb(gz(one)), '| brotli', kb(br(one)));

// একই কোড ২০টি আলাদা chunk-এ: প্রতিটি নিজে নিজে সংকুচিত হয়
const chunks = Array.from({ length: 20 }, (_, c) => files.slice(c * 10, c * 10 + 10).join(''));
const sumGz = chunks.reduce((s, c) => s + gz(c), 0);
console.log('২০ chunk   gzip যোগফল', kb(sumGz), `(${Math.round(sumGz / gz(one) * 100)}%)`);

// বাজেট: প্রথম পাতার JS gzip-এ 150 kB-এর মধ্যে? (সংখ্যাগুলো একটি আসল build থেকে)
const budget = 150_000;
const firstLoad = { 'index.js': 2290, 'react-vendor.js': 68260, 'rolldown-runtime.js': 420 };
const total = Object.values(firstLoad).reduce((a, b) => a + b, 0);
for (const [f, n] of Object.entries(firstLoad)) console.log('  ' + f.padEnd(22), kb(n));
console.log('প্রথম পাতা', kb(total), total <= budget ? 'বাজেটের ভেতরে' : 'বাজেট ছাড়িয়েছে',
  `(${Math.round(total / budget * 100)}%)`);

এক ফাইল   raw 23.64 kB | gzip 8.41 kB | brotli 7.71 kB
২০ chunk   gzip যোগফল 10.59 kB (126%)
  index.js               2.29 kB
  react-vendor.js        68.26 kB
  rolldown-runtime.js    0.42 kB
প্রথম পাতা 70.97 kB বাজেটের ভেতরে (47%)

বাজেটের হিসাব, ধাপে ধাপে, ধরে নেওয়া 200 kB/s-এ:

1. প্রথম পাতা নামানো: 70.97 kB ÷ 200 kB/s ≈ 0.355 s, মানে প্রায় 355 ms. সাথে CSS 1.94 kB, প্রায় 10 ms.
2. অ্যাডমিনে বাড়তি: 101.07 kB ÷ 200 ≈ 505 ms. বাজেট 100 kB, বাড়তি 1.07 kB, প্রায় ১%. বিকল্প তিনটি: হালকা চার্ট library, server-এ SVG বানিয়ে পাঠানো, অথবা সচেতনভাবে বাজেট বাড়ানো, কারণ অ্যাডমিন অফিসের কম্পিউটারে চলে। তিনটিই বৈধ, শর্ত হলো সিদ্ধান্তটি লেখা থাকবে।
3. Deploy-এর পরে: ধরুন দিনে ১০,০০০ ক্রেতা ফেরত আসেন আর শুধু হোম দেখেন। ভাগ ছাড়া প্রতি deploy-এ 70.53 × 10,000 = 705,300 kB ≈ 705.3 MB আবার নামে। Vendor ভাগে 2.29 × 10,000 = 22,900 kB ≈ 22.9 MB. Import map-এ হোমের JavaScript প্রায় 0. মোবাইল ডেটা যাঁরা কিনে ব্যবহার করেন, তাঁদের জন্য পার্থক্যটি সরাসরি টাকার।

CSS, deploy আর build সময়ের সীমা আমাদের নিজের সিদ্ধান্ত, কোনো মানদণ্ড নয়। বাজেট তখনই কাজের যখন যন্ত্র তা পাহারা দেয়: প্রতিটি pull request-এ build চালিয়ে আকার মেলানো, সীমা পার হলে build ব্যর্থ। এই পাইপলাইন পর্ব ৮১-এ।

১০ · AI-এর যুগে: build config যাচাই করে নিন

Build config হলো সেই জায়গা যেখানে AI-এর পুরোনো স্মৃতি সবচেয়ে বেশি ধরা পড়ে। Vite, Next.js আর Node এক বছরে বড় বদল এনেছে: Rolldown, Oxc, Turbopack default, size কলাম সরানো, type stripping stable. AI প্রায়ই আগের বছরের উত্তর দেয়, আর সেই config অনেক সময় চলেও, শুধু চুপচাপ ভুল করে।

AI-এর build বদল নেওয়ার আগে

• প্রতিটি option আমার version-এর official docs-এ পেয়েছি, deprecated নয়
• বদলের আগে ও পরে build চালিয়ে chunk-এর তালিকা আর gzip আকার মিলিয়েছি
• Build-এর CSS ফাইল খুলে দেখেছি কিছু হারায়নি
• preview বা next start-এ আসল browser-এ পাতাগুলো চালিয়েছি, শুধু build সফল দেখে থামিনি
• Production-এ .map প্রকাশ্যে নেই, আর client bundle-এ কোনো secret বা server-এর কোড ঢোকেনি
• নতুন dependency থাকলে সেটি সত্যিই আছে, বিশ্বস্ত, আর bundle কতটা বাড়াল দেখেছি