frontend-interview-questions

1. مقایسه Webpack، Vite و ESBuild از نظر سرعت، تنظیمات و موارد استفاده. کدام را برای یک پروژه React انتخاب می‌کنید و چرا؟

ویژگی	Webpack	Vite	ESBuild
سرعت	کندتر (به‌ویژه در بازسازی‌ها)	بسیار سریع در حالت dev به لطف ESM بومی + ESBuild	سریع‌ترین در bundling، ویژگی‌های پایه‌ای
تنظیمات	بسیار قابل پیکربندی، اما پر از تنظیمات	حداقل پیکربندی (مقادیر پیش‌فرض مناسب)	سبک، ولی با افزونه‌های محدود
موارد مصرف	اپ‌های بزرگ و بالغ با نیاز به سفارشی‌سازی بالا	SPAهای مدرن با نیاز به تجربه توسعه سریع	ابزارها، کتابخانه‌ها، یا پیش‌پردازنده‌ها

کدام برای React؟

برای پروژه‌های مدرن React، من Vite را ترجیح می‌دهم. راه‌اندازی بسیار سریعی با استفاده از ESM بومی دارد، با React و TypeScript به‌خوبی یکپارچه می‌شود و تجربه توسعه‌دهنده بسیار بهتری نسبت به Webpack فراهم می‌کند. برای اپ‌های قدیمی بزرگ، Webpack همچنان اکوسیستم افزونه قوی‌تری و کنترل دقیق‌تری دارد.

2. چگونه یک تنظیمات سفارشی Webpack برای یک اپ React با TypeScript و پیش‌پردازش CSS انجام می‌دهید؟

نیاز دارید به:

• webpack.config.js
• Babel برای تبدیل JSX/TS
• لودرها برای .tsx، .css و پیش‌پردازنده‌ها

// webpack.config.js
module.exports = {
  entry: "./src/index.tsx",
  output: { filename: "bundle.js", path: __dirname + "/dist" },
  resolve: { extensions: [".ts", ".tsx", ".js"] },
  module: {
    rules: [
      { test: /\.tsx?$/, use: "babel-loader", exclude: /node_modules/ },
      { test: /\.s?css$/, use: ["style-loader", "css-loader", "sass-loader"] },
    ],
  },
  devServer: { historyApiFallback: true },
};

نصب babel-loader، @babel/preset-react، @babel/preset-typescript و پیکربندی .babelrc لازم است.

این تنظیمات از React + TypeScript و SCSS پشتیبانی می‌کند و برای معماری‌های مقیاس‌پذیر فرانت‌اند مناسب است.

3. مزایای استفاده از Vite نسبت به Webpack در یک پروژه مدرن React چیست؟

• راه‌اندازی سریع‌تر : بدون bundling در حالت dev. از ESM بومی + ESBuild برای HMR فوری استفاده می‌کند.
• پیکربندی ساده‌تر : حداقل boilerplate. افزونه React با @vitejs/plugin-react.
• پشتیبانی داخلی : JSX، TypeScript، CSS Modules، PostCSS.
• ساخت تولید (Production) : در پس‌زمینه از Rollup برای tree-shaking بهینه استفاده می‌کند.

4. چگونه فرآیند build را برای کاهش زمان استقرار در CI/CD بهینه می‌کنید؟

• فعال‌سازی cache :
• استفاده از webpack.cache (حافظه یا فایل‌سیستم).
• استفاده از cacheهای CI (مثلاً node_modules، dist، turbo، vite).
• استفاده از چند رشته (Parallelization) :
• استفاده از لودرهای چندرشته‌ای (thread-loader، Vite به‌صورت پیش‌فرض این کار را می‌کند).
• تقسیم build به jobهای کوچکتر (مثلاً کلاینت در برابر سرور).
• Tree-shaking + Code splitting :
• حذف کدهای بلااستفاده.
• importهای داینامیک برای routeها یا کامپوننت‌ها.
• استفاده از ابزارهای سبک‌تر :
• مهاجرت به Vite یا ESBuild برای dev سریع‌تر و خروجی کوچکتر.
• حذف وابستگی‌های بزرگ :
• بررسی اندازه باندل با webpack-bundle-analyzer یا source-map-explorer.
• buildهای افزایشی (Incremental) :
• ابزارهایی مثل Nx یا Turborepo اجازه کش کردن و build فقط پکیج‌های تغییر کرده را می‌دهند.

5. زمانی را توضیح دهید که مجبور شدید یک مشکل مرتبط با bundler را در یک اپ React اشکال‌زدایی کنید.

در یک پروژه قبلی، اپ React که با Webpack ساخته شده بود در محیط production خطای زمان اجرا می‌داد — در حالی که در dev بدون مشکل کار می‌کرد. پس از بررسی متوجه شدم:

• خطا به خاطر tree-shake شدن یک ماژول دارای side-effect بود که به‌درستی علامت‌گذاری نشده بود.
• یک کتابخانه شخص ثالث در هنگام import رفتار side-effect داشت که در build minify شده حذف شده بود.

اقداماتی که انجام دادم:

1. به‌صورت انتخابی sideEffects: false را در package.json فعال کردم.
2. از webpack-bundle-analyzer برای بررسی حذف شدن ماژول استفاده کردم.
3. برای ماژول‌های کمکی سفارشی از کامنت /*#__PURE__*/ استفاده کردم تا tree-shaking ایمن باشد.
4. پیکربندی Webpack را ارتقا دادم تا chunking قابل پیش‌بینی و تولید سورس‌مپ بهتر داشته باشد.

نتیجه: build production پایدارتر، کوچکتر و آسان‌تر برای اشکال‌زدایی شد.

This site is open source. Improve this page.