Webpack — এটি কী, আর্কিটেকচার এবং কাজের নীতি

Webpack কী?

Webpack একটি মডিউল বান্ডলার যা অ্যাপ্লিকেশনের নির্ভরশীলতা বিশ্লেষণ করে এবং ব্রাউজার বা সার্ভারের জন্য স্ট্যাটিক ফাইলে প্যাকেজ করে। Tobias Koppers 2012 সালে তৈরি করেছেন, Webpack সব ফাইলই মডিউল ধারণার কারণে দ্রুত বিল্ড স্ট্যান্ডার্ড হয়ে ওঠে: জাভাস্ক্রিপ্ট, CSS, ছবি, ফন্ট এবং এমনকি HTML একটি একক লোডার সিস্টেমের মাধ্যমে প্রক্রিয়া করা হয়।

কেন Webpack শিল্প মান হয়ে উঠেছে

Webpack তার সময়ের জন্য একটি বৈপ্লবিক ধারণা প্রবর্তন করেছে: লোডার আপনাকে import বা require-এর মাধ্যমে যেকোনো রিসোর্স অন্তর্ভুক্ত করতে দেয়। এটি ডেভেলপারদের CSS প্রিপ্রসেসর (SCSS), TypeScript কম্পাইলার এবং ইমেজ অপ্টিমাইজারের জন্য আলাদা টুল ব্যবহার করার প্রয়োজনীয়তা থেকে মুক্ত করেছে। ২০২০ সালের মধ্যে, ৮০% এরও বেশি জাভাস্ক্রিপ্ট প্রকল্পে Webpack ব্যবহৃত হতো (npm stat ডেটা: ২০১৯–২০২৪)।

প্রতিযোগীরা — Vite, Parcel এবং Turbopack — দ্রুত ডেভেলপমেন্ট স্পিড অফার করে, কিন্তু Webpack এন্টারপ্রাইজ সেগমেন্টে স্থিতিশীলতা, পরিপক্ক ইকোসিস্টেম এবং পশ্চাদগামী সামঞ্জস্যের কারণে নেতৃত্ব বজায় রাখে। বড় প্রকল্পে Webpack থেকে Vite-এ মাইগ্রেট করতে সপ্তাহ লাগে এবং প্রায়ই প্লাগইন অসমঞ্জসতার কারণে বাধাগ্রস্ত হয়।

Webpack কীভাবে কাজ করে

Webpack এন্ট্রি পয়েন্ট থেকে শুরু করে একটি নির্ভরশীলতা গ্রাফ তৈরি করে। প্রতিটি পাওয়া import বা require গ্রাফে যোগ করা হয়, লোডারের চেইনের মধ্য দিয়ে যায় এবং একটি চাঙ্কে রাখা হয়। চূড়ান্ত আউটপুট কনফিগারেশনের উপর নির্ভর করে: একটি বান্ডল, একাধিক চাঙ্ক, অথবা UMD, CommonJS বা ES Module ফরম্যাটে লাইব্রেরি আউটপুট।

Webpack বিল্ড প্রক্রিয়া

// ন্যূনতম Webpack 5 কনফিগারেশন
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    clean: true,
  },
  module: {
    rules: [
      { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ },
    ],
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, filename: 'vendor.[contenthash:8].js' } },
    },
  },
};

Webpack 5 ফাইল-সিস্টেম-ভিত্তিক বিল্ট-ইন ক্যাশে চালু করেছে, যা রিবিল্ড ২–৫ গুণ দ্রুত করে। Persistent caching রানের মধ্যে মডিউল রূপান্তর ফলাফল সংরক্ষণ করে, যা CI/CD-তে বিশেষভাবে গুরুত্বপূর্ণ। এটি সক্রিয় করতে, কনফিগারেশনে cache: { type: 'filesystem' } যোগ করুন।

Webpack-এর মূল ধারণা

Webpack চারটি মৌলিক ধারণা নিয়ে কাজ করে: Entry (এন্ট্রি পয়েন্ট), Output (আউটপুট), Loaders (রূপান্তর) এবং Plugins (এক্সটেনশন)। এই ধারণাগুলো বোঝা একটি সাধারণ সাইট থেকে জটিল এন্টারপ্রাইজ অ্যাপ্লিকেশন পর্যন্ত যেকোনো বিল্ড কনফিগার করার জন্য প্রয়োজনীয়।

Entry, Output এবং মোড

Entry একটি অ্যারে বা অবজেক্ট যা এক বা একাধিক এন্ট্রি পয়েন্ট সংজ্ঞায়িত করে। মাল্টি-এন্ট্রি মাল্টি-কম্পোনেন্ট অ্যাপ্লিকেশনের জন্য ব্যবহৃত হয়। Output আউটপুট ফাইল কনফিগার করে: পাথ, নাম টেমপ্লেট, পাবলিক URL। Mode — development, production বা none — স্বয়ংক্রিয়ভাবে প্রতিটি মোডের জন্য সর্বোত্তম প্লাগইন এবং ডিফল্ট মান সক্রিয় করে।

Content Hash — ফাইলের নামে কন্টেন্ট হ্যাশ ([contenthash]) অন্তর্ভুক্ত করা দীর্ঘমেয়াদী ক্যাশিং নিশ্চিত করে। ব্রাউজার শুধুমাত্র তখনই নতুন ফাইল লোড করে যখন এর বিষয়বস্তু পরিবর্তিত হয়। SplitChunksPlugin স্বয়ংক্রিয়ভাবে বিভিন্ন entry থেকে সাধারণ নির্ভরশীলতা আলাদা চাঙ্কে বের করে, কোড ডুপ্লিকেশন প্রতিরোধ করে।

Loaders এবং Plugins

Loaders নির্ভরশীলতা গ্রাফে যোগ করার আগে সোর্স ফাইল রূপান্তর করে। প্রতিটি লোডার একটি ফাংশন যা ফাইলের বিষয়বস্তু গ্রহণ করে এবং একটি জাভাস্ক্রিপ্ট মডিউল ফেরত দেয়। Plugins আরও শক্তিশালী এক্সটেনশন যাদের সম্পূর্ণ বিল্ড লাইফসাইকেলে অ্যাক্সেস রয়েছে: স্টার্টআপ থেকে আউটপুট ফাইল জেনারেশন পর্যন্ত।

জনপ্রিয় লোডার এবং তাদের উদ্দেশ্য

Plugins, লোডারের বিপরীতে, বিল্ডের যেকোনো পর্যায়ে কাজ করতে পারে। HtmlWebpackPlugin স্বয়ংক্রিয়ভাবে লিঙ্কড স্ক্রিপ্ট সহ HTML ফাইল তৈরি করে। MiniCssExtractPlugin সমান্তরাল লোডিংয়ের জন্য CSS আলাদা ফাইলে বের করে। DefinePlugin বিল্ডের সময় অ্যাপ্লিকেশন কোডে এনভায়রনমেন্ট ভেরিয়েবল পাস করার অনুমতি দেয়।

Webpack বিল্ড অপ্টিমাইজেশন

Webpack বিল্ট-ইন অপ্টিমাইজেশন মেকানিজম প্রদান করে: tree shaking, code splitting এবং কম্প্রেশন। Tree shaking ES মডিউল থেকে অব্যবহৃত এক্সপোর্ট সরিয়ে দেয়। Code splitting import()-এর মাধ্যমে বান্ডলকে ডায়নামিক চাঙ্কে বিভক্ত করে। Minimizer — JS-এর জন্য TerserPlugin এবং CSS-এর জন্য CssMinimizerPlugin।

উন্নত অপ্টিমাইজেশন কৌশল

// webpack.config.js — প্রোডাকশন বিল্ড অপ্টিমাইজেশন
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: { compress: { drop_console: true }, mangle: true },
      }),
      new CssMinimizerPlugin(),
    ],
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      maxAsyncRequests: 30,
    },
  },
};

Module Federation মাইক্রো-ফ্রন্টএন্ডের জন্য Webpack 5-এর সবচেয়ে শক্তিশালী বৈশিষ্ট্য। এটি রানটাইমে অন্যান্য স্বাধীন বিল্ড থেকে মডিউল লোড করার অনুমতি দেয়। প্রতিটি মাইক্রো-অ্যাপ্লিকেশন স্বাধীনভাবে ডেভেলপ এবং ডিপ্লয় করা হয়, কিন্তু ব্যবহারকারীর জন্য একটি একক ইন্টারফেসে একত্রিত হয়। Segment Analytics ২০২১ সাল থেকে প্রোডাকশনে Module Federation ব্যবহার করছে, যা ডিপ্লয়মেন্ট সময় ৮০% কমিয়েছে।

React Native এবং ওয়েব প্রকল্পের জন্য Webpack

Webpack React Native-এ সরাসরি খুব কমই ব্যবহৃত হয় — এর জন্য Metro বিদ্যমান। তবে, React Native Web প্রকল্পে Webpack ব্যবহৃত হয়, যখন একটি কোডবেস মোবাইল প্ল্যাটফর্ম (Metro-র মাধ্যমে) এবং ওয়েব (Webpack-এর মাধ্যমে) উভয়ের জন্য তৈরি করা হয়। Ionic এবং Cordova-তে হাইব্রিড অ্যাপ্লিকেশনেও Webpack জনপ্রিয়।

ক্রস-প্ল্যাটফর্ম বিল্ডের জন্য Webpack

যেসব প্রকল্পে ওয়েব রেন্ডারিংয়ের জন্য React Native Web ব্যবহার করা হয়, Webpack কে উপনাম দিয়ে কনফিগার করা হয় যা নেটিভ মডিউলকে ওয়েব ইমপ্লিমেন্টেশন দিয়ে প্রতিস্থাপন করে। Alias react-native → react-native-web ইম্পোর্ট পরিবর্তন না করেই শেয়ার্ড কম্পোনেন্ট ব্যবহারের অনুমতি দেয়। DefinePlugin প্ল্যাটফর্ম-নির্দিষ্ট কোডের শর্তসাপেক্ষ কম্পাইলেশনের জন্য প্ল্যাটফর্ম ফ্ল্যাগ পাস করে।

মোবাইল ওয়েবের জন্য Webpack অপ্টিমাইজেশন ডেস্কটপ থেকে ভিন্ন। Mobile-first বিল্ডে আক্রমনাত্মক মিনিফিকেশন, ইমেজের lazy loading এবং ক্রিটিকাল CSS-এর অগ্রাধিকার লোডিং অন্তর্ভুক্ত। CompressionPlugin brotli কম্প্রেশন সহ 3G/4G মোবাইল নেটওয়ার্কের জন্য বান্ডল সাইজ ২০–২৫% কমায়। বিভিন্ন প্ল্যাটফর্মের জন্য কনফিগারেশন বিভক্ত করতে webpack-merge ব্যবহার করুন: মোবাইল-ফার্স্ট এবং ডেস্কটপ-অপ্টিমাইজড বিল্ড।

Webpack 5 Module Federation: মাইক্রো-ফ্রন্টএন্ড

Module Federation Webpack 5-এর একটি বৈপ্লবিক বৈশিষ্ট্য যা npm-এ প্রকাশ না করেই অন্যান্য স্বাধীন বিল্ড থেকে জাভাস্ক্রিপ্ট মডিউল লোড করার অনুমতি দেয়। প্রতিটি মাইক্রো-অ্যাপ্লিকেশন স্বাধীনভাবে ডেভেলপ হয়, এর নিজস্ব Webpack কনফিগারেশন থাকে এবং আলাদাভাবে ডিপ্লয় হয়। Host অ্যাপ্লিকেশন ModuleFederationPlugin-এর বিশেষ কনফিগারেশনের মাধ্যমে রিমোট বিল্ড থেকে মডিউল সংযুক্ত করে।

প্রদানকারী নির্বাচিত মডিউল এক্সপোজ করে, এবং হোস্ট সেগুলো সংযোগ করতে remotes ব্যবহার করে। Module Federation শেয়ার্ড লাইব্রেরি সমর্থন করে: যদি React দুটি মাইক্রো-অ্যাপ্লিকেশনে ব্যবহার করা হয়, Webpack এটি শুধুমাত্র একবার লোড করে। এটি ব্যবহারকারীর জন্য ৬০% পর্যন্ত ট্রাফিক সাশ্রয় করে। Segment এবং Best Buy-সহ বড় কোম্পানিগুলো প্রোডাকশনে Module Federation ব্যবহার করে, ডিপ্লয়মেন্ট সময় ঘন্টা থেকে মিনিটে কমিয়ে এনেছে।

সাধারণ সমস্যা এবং তাদের সমাধান

Module Federation-এর সাথে কাজ করার সময়, ডেভেলপাররা প্রায়শই বিভিন্ন সংস্করণের শেয়ার্ড নির্ভরশীলতার দ্বন্দ্বের সম্মুখীন হন। সমাধান হল গুরুত্বপূর্ণ লাইব্রেরির জন্য স্পষ্টভাবে requiredVersion এবং singleton: true উল্লেখ করা। আরেকটি সমস্যা হল রিমোট বিল্ড থেকে কম্পোনেন্ট ইম্পোর্ট করার সময় কনটেক্সট হারানো, বিশেষ করে React Context এবং Redux-এর সাথে। এটি সমাধান করতে, shared: { react: { singleton: true } } ব্যবহার করুন যাতে নিশ্চিত করা যায় যে সব মাইক্রো-অ্যাপ্লিকেশন React-এর একটি ইনস্ট্যান্স ব্যবহার করে। বড় মাইক্রো-ফ্রন্টএন্ড আর্কিটেকচারের জন্য, শেয়ার্ড নির্ভরশীলতার সংস্করণ সিঙ্ক্রোনাইজ করতে এবং বিল্ড সামঞ্জস্য নিশ্চিত করতে মোনোরেপো সিস্টেম (Nx, Turborepo) এর সাথে Module Federation ব্যবহার করার পরামর্শ দেওয়া হয়।