دوره آموزش ماژول باندلینگ از صفر همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره آموزش ماژول باندلینگ از صفر

موضوع کلی: برنامه نویسی

موضوع میانی: توسعه وب: فرانت‌اند**

📋 سرفصل‌های دوره

• 1. مقدمه‌ای بر توسعه وب مدرن فرانت‌اند و پیچیدگی‌ها
• 2. مشکلات مدیریت فایل‌های جاوااسکریپت در مرورگرها (قبل از ماژول‌ها)
• 3. مفهوم اسکوپ سراسری (Global Scope) و پیامدهای آن
• 4. آشنایی با الگوی توابع اجرایی بلافاصله (IIFE) برای Encapsulation
• 5. تاریخچه سیستم‌های ماژول در جاوااسکریپت
• 6. ماژول‌های CommonJS: استاندارد Node.js
• 7. ماژول‌های AMD: راه‌حلی برای بارگذاری Asynchronous در مرورگر
• 8. ماژول‌های UMD: استاندارد Universal برای مرورگر و Node.js
• 9. معرفی ماژول‌های ECMAScript (ESM) به عنوان استاندارد بومی
• 10. نحوه استفاده از دستورات `import` و `export` در ESM
• 11. وارد کردن پیش‌فرض، نام‌گذاری شده و ترکیبی در ESM
• 12. وارد کردن تمامی ماژول‌ها با `* as`
• 13. وارد کردن و خروجی گرفتن مجدد (Re-exporting) برای ساخت APIهای Module
• 14. وارد کردن پویا (Dynamic Imports) با تابع `import()`
• 15. چالش‌های سازگاری ESM در مرورگرها و Node.js (قبل از باندلینگ)
• 16. معرفی مفهوم باندلینگ (Module Bundling)
• 17. مزایای اصلی استفاده از باندلرها در پروژه‌های فرانت‌اند
• 18. Webpack چیست؟ معرفی یک باندلر قدرتمند
• 19. اصطلاحات کلیدی Webpack: Entry, Output, Loaders, Plugins, Mode
• 20. نصب Webpack و Webpack-CLI
• 21. ساختار پروژه پایه برای شروع با Webpack
• 22. ایجاد اولین فایل `webpack.config.js`
• 23. تنظیم Entry Point (نقطه ورودی) اصلی برنامه
• 24. تنظیم Output (نقطه خروجی) و نام‌گذاری فایل باندل
• 25. کار با حالت‌های Development و Production در Webpack
• 26. معرفی Loaders: نقش و نحوه کار
• 27. نصب و پیکربندی `babel-loader` برای ترانسپایل جاوااسکریپت
• 28. استفاده از Babel Presets (مانند `@babel/preset-env`)
• 29. مدیریت فایل‌های CSS با `css-loader` و `style-loader`
• 30. استخراج CSS به فایل‌های جداگانه با `MiniCssExtractPlugin`
• 31. استفاده از SASS/LESS با `sass-loader`/`less-loader`
• 32. مدیریت تصاویر و فایل‌های رسانه‌ای با Asset Modules (Webpack 5)
• 33. مدیریت فونت‌ها و SVG ها
• 34. معرفی Plugins: نقش و کاربردها
• 35. تولید خودکار فایل HTML با `HtmlWebpackPlugin`
• 36. پاکسازی پوشه خروجی قبل از بیلد با `CleanWebpackPlugin`
• 37. راه‌اندازی `webpack-dev-server` برای تجربه توسعه بهتر
• 38. فعال‌سازی Hot Module Replacement (HMR)
• 39. تنظیم Sourcemaps برای اشکال‌زدایی کد در مرورگر
• 40. مدیریت متغیرهای محیطی (Environment Variables) با `webpack.DefinePlugin`
• 41. تنظیمات چندگانه Entry Point و کاربردهای آن
• 42. مدیریت نام‌گذاری فایل‌های خروجی با Hashing
• 43. مفهوم Tree Shaking: حذف کد مرده و بهینه‌سازی حجم
• 44. نحوه فعال‌سازی Tree Shaking و نقش `sideEffects` در `package.json`
• 45. تقسیم‌بندی کد (Code Splitting) برای کاهش حجم اولیه بارگذاری
• 46. تقسیم‌بندی کد با Dynamic Imports (وارد کردن پویا)
• 47. استفاده از Magic Comments در Dynamic Imports برای نام‌گذاری چانک‌ها
• 48. استراتژی‌های تقسیم‌بندی چانک‌ها با `optimization.splitChunks`
• 49. بهینه‌سازی باندل‌های وندور (Vendor Bundles)
• 50. فشرده‌سازی جاوااسکریپت با `TerserWebpackPlugin`
• 51. فشرده‌سازی CSS با `CssMinimizerWebpackPlugin`
• 52. بهینه‌سازی و فشرده‌سازی تصاویر در فرایند بیلد
• 53. استراتژی‌های کشینگ (Caching) برای بهبود عملکرد در مرورگر
• 54. استفاده از Webpack Bundle Analyzer برای تحلیل بصری باندل‌ها
• 55. مدیریت Alias‌ها در `resolve.alias` برای سهولت وارد کردن ماژول‌ها
• 56. مدیریت Extensions در `resolve.extensions`
• 57. پیکربندی Webpack برای پروژه Monorepo
• 58. Webpack و Server-Side Rendering (SSR): چالش‌ها و راه‌حل‌ها
• 59. تنظیمات Webpack برای ساخت کتابخانه‌های جاوااسکریپت
• 60. مدیریت فایل‌های Static و Asset Manifest
• 61. معرفی Module Federation در Webpack 5
• 62. تنظیم Host و Remote در Module Federation
• 63. اشتراک‌گذاری Dependencies در Module Federation
• 64. Lazy Loading کامپوننت‌ها در محیط Module Federation
• 65. مشکلات رایج در پیکربندی Webpack و نحوه اشکال‌زدایی
• 66. نوشتن یک Loader سفارشی (مقدمه‌ای بر ساختار و API)
• 67. نوشتن یک Plugin سفارشی (مقدمه‌ای بر Tapable Hooks)
• 68. معرفی Parcel: باندلر با تجربه کاربری "صفر پیکربندی"
• 69. نصب و استفاده از Parcel برای یک پروژه فرانت‌اند
• 70. ویژگی‌های اصلی Parcel: ترانسفورمرها، دیباگینگ و کشینگ
• 71. مقایسه Parcel با Webpack: مزایا و معایب
• 72. معرفی Rollup: باندلر تخصصی برای کتابخانه‌های جاوااسکریپت
• 73. نصب و پیکربندی Rollup
• 74. تفاوت‌های کلیدی Rollup با Webpack و Parcel در خروجی ESM
• 75. معرفی Vite: نسل جدید ابزارهای فرانت‌اند
• 76. Vite و Native ESM: توسعه فوق‌العاده سریع
• 77. شروع یک پروژه جدید با Vite
• 78. فرایند Build در Vite (با استفاده از Rollup داخلی)
• 79. معرفی Esbuild: باندلر و ترانسپایلر فوق‌العاده سریع
• 80. استفاده از Esbuild برای باندلینگ و Minification
• 81. مقایسه سرعت Esbuild با سایر باندلرها
• 82. معرفی SWC: جایگزینی سریع برای Babel و Terser
• 83. انتخاب باندلر مناسب برای نیازهای پروژه شما
• 84. بهینه‌سازی عملکرد با Prefetching و Preloading منابع
• 85. بهینه‌سازی Critical CSS و بارگذاری تنبل آن
• 86. استراتژی‌های کارآمد برای کاهش حجم نهایی باندل
• 87. استفاده از Workbox برای Webpack: ساخت Progressive Web Apps (PWA)
• 88. پیاده‌سازی Service Workers برای کشینگ آفلاین
• 89. باندلینگ در معماری Micro-Frontends (فراتر از Module Federation)
• 90. مدیریت نسخه‌بندی (Versioning) و کشینگ بلندمدت باندل‌ها
• 91. امنیت در باندل‌های جاوااسکریپت: Subresource Integrity (SRI)
• 92. چالش‌ها و راه‌حل‌های باندلینگ در پلتفرم‌های ابری (Cloud Platforms)
• 93. اتوماسیون فرایند باندلینگ در خطوط CI/CD
• 94. تست کارایی باندل‌ها و مانیتورینگ آن
• 95. استراتژی‌های دیباگینگ پیشرفته برای مشکلات باندلینگ
• 96. بهترین روش‌ها برای نگهداری و بروزرسانی تنظیمات باندلر
• 97. بررسی تأثیر باندلینگ بر Core Web Vitals
• 98. آینده باندلینگ و ابزارهای جدید (مثلاً Turbopack)
• 99. مروری بر تمام مفاهیم و نقشه راه برای ادامه یادگیری
• 100. پروژه‌ای عملی: ساخت یک باندلر ساده (مفهومی)