اپلیکیشن اندرویدی فلش‌کارت آموزشی آموزش Webpack و بهینه‌سازی باندل‌ها

📚 کتاب آموزشی جامع

📚 اطلاعات کتاب

عنوان کتاب: کتاب آموزش 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 در پروژه‌ها