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

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

عنوان دوره: آموزش Webpack و بهینه‌سازی باندل‌ها

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

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

📋 سرفصل‌های دوره (100 موضوع)

• 1. مقدمه‌ای بر ابزارهای ساخت در توسعه وب
• 2. مشکلات رایج بدون ابزارهای ساخت (مثال‌ها)
• 3. مروری بر ابزارهای ساخت قدیمی (Grunt, Gulp)
• 4. چرا Webpack؟ مزایا و جایگاه آن
• 5. تاریخچه مختصر Webpack
• 6. نصب و راه‌اندازی Webpack
• 7. مفاهیم اصلی Webpack: Entry, Output, Loaders, Plugins
• 8. فایل پیکربندی Webpack (webpack.config.js)
• 9. ساختار پروژه برای Webpack
• 10. اجرای اولین باندل با Webpack
• 11. پیکربندی Entry: Single Entry Point
• 12. پیکربندی Entry: Multiple Entry Points
• 13. پیکربندی Output: نامگذاری فایل‌های خروجی
• 14. پیکربندی Output: مسیردهی فایل‌های خروجی
• 15. مفهوم Webpack Modes: Development, Production, None
• 16. استفاده از Mode Production برای بهینه‌سازی خودکار
• 17. استفاده از Mode Development برای سرعت توسعه
• 18. مفهوم Loaders و نحوه عملکرد آن‌ها
• 19. نصب و پیکربندی Loaders
• 20. استفاده از babel-loader برای JavaScript
• 21. تبدیل ES6+ به ES5 با Babel
• 22. پیکربندی .babelrc و presets
• 23. استفاده از style-loader و css-loader برای CSS
• 24. وارد کردن فایل‌های CSS به JavaScript
• 25. استفاده از postcss-loader برای پردازش CSS
• 26. پیکربندی PostCSS و Autoprefixer
• 27. استفاده از sass-loader برای SASS/SCSS
• 28. استفاده از less-loader برای LESS
• 29. پردازش تصاویر با file-loader و url-loader
• 30. بهینه‌سازی تصاویر با image-webpack-loader
• 31. مدیریت فونت‌ها با file-loader
• 32. پردازش فایل‌های SVG
• 33. استفاده از raw-loader برای وارد کردن فایل متنی
• 34. زنجیره‌ای کردن Loaders (Loader Chaining)
• 35. نوشتن یک Loader سفارشی (مقدماتی)
• 36. مفهوم Plugins و کاربرد آن‌ها
• 37. نصب و پیکربندی Plugins
• 38. استفاده از HtmlWebpackPlugin برای تولید HTML
• 39. پیکربندی قالب‌ها در HtmlWebpackPlugin
• 40. استفاده از CleanWebpackPlugin برای پاکسازی پوشه Build
• 41. استفاده از DefinePlugin برای تعریف متغیرهای سراسری
• 42. استفاده از MiniCssExtractPlugin برای استخراج CSS
• 43. استفاده از CopyWebpackPlugin برای کپی کردن فایل‌ها
• 44. نوشتن یک Plugin سفارشی (مقدماتی)
• 45. مفهوم Webpack Dev Server
• 46. نصب و پیکربندی Webpack Dev Server
• 47. Hot Module Replacement (HMR): مقدمه
• 48. فعال‌سازی HMR برای JavaScript
• 49. فعال‌سازی HMR برای CSS
• 50. مدیریت Source Maps: انواع و کاربردها
• 51. پیکربندی Source Maps برای Dev و Prod
• 52. پروکسی کردن درخواست‌ها در Webpack Dev Server
• 53. Linting کد با eslint-webpack-plugin
• 54. بهینه‌سازی برای Production: اهداف اصلی
• 55. Minification (فشرده‌سازی کد): مقدمه
• 56. Minification با TerserPlugin (برای JavaScript)
• 57. Minification با CssMinimizerWebpackPlugin (برای CSS)
• 58. Tree Shaking: مقدمه و نحوه عملکرد
• 59. فعال‌سازی Tree Shaking برای JavaScript
• 60. شرطی کردن Import ها برای Tree Shaking
• 61. تنظیمات sideEffects در package.json
• 62. Code Splitting: چرا و چگونه؟
• 63. Dynamic Imports با import()
• 64. استراتژی‌های تقسیم کد: Per Route, Per Component
• 65. Vendor Bundling (باندل کردن کتابخانه‌های مشترک)
• 66. استفاده از SplitChunksPlugin
• 67. پیکربندی پیشرفته SplitChunksPlugin
• 68. گروه‌بندی ماژول‌ها در SplitChunksPlugin
• 69. استخراج Runtime Chunks
• 70. مدیریت و بهینه‌سازی تصاویر SVG
• 71. استفاده از webpack-manifest-plugin برای کشینگ
• 72. استراتژی‌های کشینگ فایل‌ها (Caching Strategies)
• 73. Long-term Caching با استفاده از Contenthash
• 74. Preloading و Prefetching ماژول‌ها
• 75. مدیریت فایل‌های Static (عکس، فونت، ویدئو)
• 76. آنالیز باندل با Webpack Bundle Analyzer
• 77. خواندن و تفسیر گزارش Webpack Bundle Analyzer
• 78. بهینه‌سازی Bundle Size بر اساس گزارش Analyzer
• 79. بودجه‌بندی عملکرد (Performance Budgeting)
• 80. استفاده از performance hints در Webpack
• 81. کاهش زمان Build Webpack
• 82. Parallel Processing در Webpack
• 83. بهبودهای Webpack 5: جدیدترین ویژگی‌ها
• 84. Asset Modules در Webpack 5 (جایگزین file-loader/url-loader)
• 85. Cache در Webpack 5 (File System Cache)
• 86. Module Federation: مقدمه و کاربردها
• 87. راه‌اندازی یک پروژه با Module Federation (Host)
• 88. راه‌اندازی یک پروژه با Module Federation (Remote)
• 89. اشتراک‌گذاری Dependencies در Module Federation
• 90. ملاحظات امنیتی در Module Federation
• 91. Webpack با فریم‌ورک‌های JavaScript (React, Vue, Angular)
• 92. پیکربندی Webpack برای Server-Side Rendering (SSR)
• 93. استفاده از Web Workers با Webpack
• 94. پیکربندی Webpack برای ساخت Progressive Web Apps (PWA)
• 95. Webpack و TypeScript: پیکربندی ts-loader
• 96. استفاده از Workbox با Webpack برای Service Workers
• 97. دیباگ کردن پیکربندی‌های Webpack
• 98. خطاهای رایج Webpack و راه‌حل‌ها
• 99. بهترین روش‌ها برای سازماندهی فایل پیکربندی Webpack
• 100. نگهداشت و به‌روزرسانی Webpack در پروژه‌ها

دوره جامع آموزش Webpack: از مبتدی تا بهینه‌سازی حرفه‌ای وب‌سایت

معرفی دوره: وب‌سایت خود را به یک موشک تبدیل کنید!

آیا تا به حال وب‌سایتی ساخته‌اید که با افزایش قابلیت‌ها، کند و کندتر شده است؟ آیا مدیریت فایل‌های JavaScript، CSS، تصاویر و فونت‌ها در پروژه‌های بزرگ شما را کلافه کرده است؟ اگر پاسخ شما مثبت است، شما در جای درستی قرار دارید. در دنیای توسعه وب مدرن، سرعت و عملکرد حرف اول را می‌زنند. کاربران انتظار دارند وب‌سایت‌ها در کسری از ثانیه بارگذاری شوند و موتورهای جستجو نیز به وب‌سایت‌های سریع‌تر رتبه بهتری می‌دهند. اینجاست که Webpack، قدرتمندترین ابزار باندل‌سازی ماژول‌ها، وارد میدان می‌شود.

Webpack فقط یک ابزار نیست؛ یک شاه‌کلید برای ساخت اپلیکیشن‌های وب مدرن، بهینه و مقیاس‌پذیر است. این ابزار به شما اجازه می‌دهد تا تمام دارایی‌های پروژه (Assets) خود را به صورت هوشمند مدیریت کرده، حجم فایل‌های نهایی را به شکل چشمگیری کاهش دهید و فرآیند توسعه را خودکار و لذت‌بخش کنید. دوره "آموزش Webpack و بهینه‌سازی باندل‌ها" دروازه‌ای برای ورود به دنیای حرفه‌ای توسعه فرانت‌اند است. در این دوره، شما یاد می‌گیرید چگونه با استفاده از جادوی Webpack، کدهای خود را به بسته‌هایی فشرده و بهینه تبدیل کنید و عملکرد وب‌سایت خود را به سطحی برسانید که پیش از این تصور نمی‌کردید.

درباره دوره: یک نقشه راه کامل برای تسلط بر Webpack

این دوره یک مسیر آموزشی جامع و پروژه-محور است که شما را از مفاهیم پایه‌ای Webpack تا پیچیده‌ترین تکنیک‌های بهینه‌سازی همراهی می‌کند. ما از صفر شروع می‌کنیم و فرض می‌کنیم شما هیچ دانش قبلی درباره Webpack ندارید. قدم به قدم با مفاهیم اصلی مانند Entry, Output, Loaders و Plugins آشنا می‌شوید و یاد می‌گیرید چگونه یک محیط توسعه حرفه‌ای برای خود راه‌اندازی کنید. سپس به دنیای شگفت‌انگیز بهینه‌سازی عملکرد شیرجه می‌زنیم و تکنیک‌های حیاتی مانند Code Splitting، Lazy Loading، Tree Shaking و Caching را به صورت عملی پیاده‌سازی می‌کنیم تا سرعت بارگذاری صفحات شما به حداکثر برسد.

موضوعات کلیدی دوره

• آشنایی کامل با مفاهیم اصلی و معماری Webpack
• مدیریت انواع فایل‌ها (JavaScript, CSS, SASS, تصاویر، فونت‌ها) با Loaders
• افزایش قدرت Webpack با پلاگین‌های کاربردی و ضروری
• راه‌اندازی یک سرور توسعه محلی (DevServer) با قابلیت Hot Module Replacement (HMR)
• تکنیک‌های پیشرفته بهینه‌سازی باندل برای کاهش حجم نهایی
• پیاده‌سازی Code Splitting و Lazy Loading برای بارگذاری هوشمند کدها
• حذف کدهای مرده (Dead Code) با استفاده از Tree Shaking
• استراتژی‌های پیشرفته Caching برای افزایش سرعت بارگذاری‌های مجدد
• یکپارچه‌سازی Webpack با فریم‌ورک‌های محبوب مانند React و Vue
• ساخت و بهینه‌سازی یک پروژه واقعی از صفر تا صد

این دوره برای چه کسانی مناسب است؟

• توسعه‌دهندگان فرانت‌اند که می‌خواهند مهارت‌های خود را به سطح بالاتری ارتقا دهند.
• توسعه‌دهندگان جاوا اسکریپت که به دنبال ساخت اپلیکیشن‌های مقیاس‌پذیر و بهینه هستند.
• توسعه‌دهندگانی که با فریم‌ورک‌هایی مانند React, Vue, Angular کار می‌کنند و می‌خواهند کنترل کاملی بر فرآیند ساخت پروژه خود داشته باشند.
• دانشجویان و علاقه‌مندان به توسعه وب که می‌خواهند با ابزارهای استاندارد صنعت آشنا شوند.
• هر توسعه‌دهنده‌ای که از کندی وب‌سایت خود خسته شده و به دنبال افزایش چشمگیر سرعت و عملکرد است.

چرا این دوره را بگذرانیم؟ (مزایای یادگیری Webpack)

• تسلط بر ابزار استاندارد صنعت

  Webpack ابزار شماره یک در دنیای توسعه وب مدرن است. تسلط بر آن نه تنها شما را به یک توسعه‌دهنده حرفه‌ای‌تر تبدیل می‌کند، بلکه فرصت‌های شغلی بهتری را پیش روی شما قرار می‌دهد.

• ساخت وب‌سایت‌های فوق سریع

  با تکنیک‌هایی که در این دوره یاد می‌گیرید، می‌توانید حجم فایل‌های نهایی را تا 80% کاهش دهید. این یعنی بهبود تجربه کاربری، افزایش رضایت مشتریان و کسب رتبه بهتر در گوگل.

• افزایش بهره‌وری در کدنویسی

  فرآیندهای تکراری مانند فشرده‌سازی کدها، تبدیل کدهای مدرن به نسخه‌های قدیمی‌تر و به‌روزرسانی لحظه‌ای صفحه را خودکار کنید و زمان خود را صرف خلاقیت و حل مسائل مهم‌تر کنید.

• نوشتن کدهای تمیزتر و قابل نگهداری

  Webpack به شما کمک می‌کند تا ساختار پروژه خود را ماژولار و منظم نگه دارید. این امر به خصوص در پروژه‌های بزرگ، کار تیمی و نگهداری بلندمدت کدها بسیار حیاتی است.

• آموزش کاملاً پروژه-محور

  ما به تئوری خشک و خالی اعتقاد نداریم. در طول این دوره، شما یک پروژه واقعی را از ابتدا تا انتها با Webpack پیکربندی و بهینه‌سازی خواهید کرد تا تمام مفاهیم را به صورت عملی درک کنید.

سرفصل‌های جامع دوره (بیش از ۱۰۰ سرفصل کاربردی)

این دوره با پوشش بیش از ۱۰۰ سرفصل دقیق و کاربردی، شما را به یک متخصص Webpack تبدیل می‌کند. در ادامه نگاهی به برخی از مهم‌ترین بخش‌های دوره می‌اندازیم:

فصل اول: مبانی و مفاهیم کلیدی Webpack

• Webpack چیست و چرا به آن نیاز داریم؟
• نصب و راه‌اندازی اولیه پروژه
• معرفی چهار مفهوم اصلی: Entry, Output, Loaders, Plugins
• ساخت اولین باندل با Webpack
• آشنایی با فایل `webpack.config.js`
• استفاده از NPM Scripts برای اجرای دستورات Webpack

فصل دوم: مدیریت دارایی‌ها (Assets)

• کار با `css-loader` و `style-loader`
• افزودن پیش‌پردازنده‌های CSS مانند SASS/SCSS با `sass-loader`
• استخراج CSS در فایل‌های جداگانه با `MiniCssExtractPlugin`
• بهینه‌سازی و فشرده‌سازی فایل‌های CSS
• مدیریت تصاویر (JPG, PNG, SVG) و بهینه‌سازی آن‌ها
• بارگذاری فونت‌های سفارشی در پروژه

فصل سوم: محیط توسعه (Development)

• راه‌اندازی `webpack-dev-server` برای توسعه سریع
• فعال‌سازی Hot Module Replacement (HMR) برای مشاهده آنی تغییرات
• آشنایی با انواع Source Maps برای دیباگینگ آسان
• مدیریت متغیرهای محیطی (Environment Variables)
• ایجاد کانفیگ‌های مجزا برای محیط Development و Production

فصل چهارم: بهینه‌سازی برای محیط Production (شاه‌بیت دوره)

• فشرده‌سازی (Minify) کدهای JavaScript با `TerserWebpackPlugin`
• حذف کدهای استفاده نشده (Dead Code) با تکنیک Tree Shaking
• مفهوم و پیاده‌سازی Code Splitting
• جداسازی کدهای Third-party (Vendor)
• بارگذاری تنبل (Lazy Loading) ماژول‌ها با Dynamic Imports
• تحلیل و بررسی حجم باندل نهایی با `Webpack Bundle Analyzer`

فصل پنجم: استراتژی‌های Caching

• Caching چیست و چرا اهمیت دارد؟
• استفاده از Hash در نام فایل‌ها برای مدیریت کش مرورگر
• استخراج Runtime و Manifest برای بهینه‌سازی کش
• پیاده‌سازی استراتژی Caching بلندمدت

فصل ششم: کار با فریم‌ورک‌ها و تکنیک‌های پیشرفته

• پیکربندی Webpack برای یک پروژه React از صفر
• استفاده از Babel برای تبدیل کدهای مدرن (ES6+)
• پیکربندی Webpack برای یک پروژه Vue.js
• آشنایی با Module Federation برای معماری میکر-فرانت‌اند
• نکات و ترفندهای پیشرفته برای پروژه‌های بزرگ

فصل هفتم: پروژه نهایی - ساخت و بهینه‌سازی یک اپلیکیشن واقعی

• تعریف نیازمندی‌های پروژه
• ایجاد ساختار اولیه پروژه
• پیکربندی Webpack از صفر برای محیط توسعه و پروداکشن
• پیاده‌سازی تمام تکنیک‌های بهینه‌سازی آموخته شده
• دیپلوی نهایی پروژه بهینه شده