آموزش Webpack 5 در سال 2023: بهینه سازی برای تولید

سرفصل ها و درس ها

معرفی Introduction

• معرفی Introduction

• آنچه برای این دوره نیاز دارید What you need for this course

معرفی Introduction

• معرفی Introduction

• آنچه برای این دوره نیاز دارید What you need for this course

راه اندازی Webpack Setting Up Webpack

• راه اندازی اپلیکیشن Setting Up Application

• یادداشت سریع درباره مخزن Github Quick Note About The Github Repository

• ادغام Webpack در برنامه Integrating Webpack Into The Application

• پیکربندی پیش‌فرض بسته وب Default Webpack Configuration

• تفکیک کد به چندین فایل Separating Code Into Multiple Files

• پیکربندی های مختلف برای ساخت و سازهای تولید و توسعه Different Configurations for Production and Development Builds

• راه اندازی Webpack-Dev-Server Setting Up Webpack-Dev-Server

راه اندازی Webpack Setting Up Webpack

• راه اندازی اپلیکیشن Setting Up Application

• یادداشت سریع درباره مخزن Github Quick Note About The Github Repository

• ادغام Webpack در برنامه Integrating Webpack Into The Application

• پیکربندی پیش‌فرض بسته وب Default Webpack Configuration

• تفکیک کد به چندین فایل Separating Code Into Multiple Files

• پیکربندی های مختلف برای ساخت و سازهای تولید و توسعه Different Configurations for Production and Development Builds

• راه اندازی Webpack-Dev-Server Setting Up Webpack-Dev-Server

7 روش استفاده از CSS با Webpack 7 Ways Of Using CSS With Webpack

• مقدمه ای بر روش های مختلف استفاده از سبک ها Introduction To Different Ways Of Handling Styles

• استفاده از CSS معمولی با Webpack. اطلاعات مختصر درباره لودرها Using Regular CSS With Webpack. Brief Info About Loaders

• استخراج CSS تولید شده در یک بسته مجزا Extracting Generated CSS Into a Separate Bundle

• ایجاد HTML بر اساس الگوی سفارشی شما Generating HTML Based On Your Custom Template

• حذف بسته های قدیمی قبل از تولید بسته های جدید Removing Old Bundles Before Generating New Ones

• راه دیگری برای حذف بسته های قدیمی Another Way Of Removing Old Bundles

• ماژول های CSS CSS Modules

• بهینه سازی CSS برای تولید Optimizing Your CSS For Production

• استفاده از پیش پردازنده کمتر برای نوشتن سبک های شما Using Less Preprocessor For Writing Your Styles

• استفاده از Sass به همراه Webpack Using Sass Together With Webpack

• با استفاده از PostCSS Using PostCSS

• حذف CSS استفاده نشده از بسته های تولید شده Removing Unused CSS From The Generated Bundles

• مقدمه ای بر CSS-in-JS Introduction To CSS-in-JS

• با استفاده از JSS Using JSS

• استفاده از Emotion (یک کتابخانه CSS-in-JS دیگر) Using Emotion (Another CSS-in-JS Library)

7 روش استفاده از CSS با Webpack 7 Ways Of Using CSS With Webpack

• مقدمه ای بر روش های مختلف استفاده از سبک ها Introduction To Different Ways Of Handling Styles

• استفاده از CSS معمولی با Webpack. اطلاعات مختصر درباره لودرها Using Regular CSS With Webpack. Brief Info About Loaders

• استخراج CSS تولید شده در یک بسته مجزا Extracting Generated CSS Into a Separate Bundle

• ایجاد HTML بر اساس الگوی سفارشی شما Generating HTML Based On Your Custom Template

• حذف بسته های قدیمی قبل از تولید بسته های جدید Removing Old Bundles Before Generating New Ones

• راه دیگری برای حذف بسته های قدیمی Another Way Of Removing Old Bundles

• ماژول های CSS CSS Modules

• بهینه سازی CSS برای تولید Optimizing Your CSS For Production

• استفاده از پیش پردازنده کمتر برای نوشتن سبک های شما Using Less Preprocessor For Writing Your Styles

• استفاده از Sass به همراه Webpack Using Sass Together With Webpack

• با استفاده از PostCSS Using PostCSS

• حذف CSS استفاده نشده از بسته های تولید شده Removing Unused CSS From The Generated Bundles

• مقدمه ای بر CSS-in-JS Introduction To CSS-in-JS

• با استفاده از JSS Using JSS

• استفاده از Emotion (یک کتابخانه CSS-in-JS دیگر) Using Emotion (Another CSS-in-JS Library)

پردازش تصاویر با Webpack Processing Images With Webpack

• مقدمه ای بر پردازش تصاویر Introduction To Processing Images

• پردازش تصاویر در حالت توسعه Processing Images In Development Mode

• بهینه سازی تصاویر برای تولید Optimizing Images For Production

• یک راه دیگر برای بهینه سازی تصاویر One More Way Of Optimizing Images

• پردازش مقادیر زیادی از تصاویر Processing Large Amounts of Images

• تولید تصاویر WEBP خارج از JPEG یا PNG Generating WEBP Images Out Of JPEG or PNG

• یادداشت سریع درباره بهینه سازی تصاویر Quick Note About Optimizing Images

پردازش تصاویر با Webpack Processing Images With Webpack

• مقدمه ای بر پردازش تصاویر Introduction To Processing Images

• پردازش تصاویر در حالت توسعه Processing Images In Development Mode

• بهینه سازی تصاویر برای تولید Optimizing Images For Production

• یک راه دیگر برای بهینه سازی تصاویر One More Way Of Optimizing Images

• پردازش مقادیر زیادی از تصاویر Processing Large Amounts of Images

• تولید تصاویر WEBP خارج از JPEG یا PNG Generating WEBP Images Out Of JPEG or PNG

• یادداشت سریع درباره بهینه سازی تصاویر Quick Note About Optimizing Images

افزایش پشتیبانی مرورگر با Babel Increasing Browser Support With Babel

• راه اندازی کامپایلر Babel Setting Up Babel Compiler

• افزایش پشتیبانی از مرورگر خود با Polyfills Increasing Your Browser Support With Polyfills

• پیکربندی های مختلف Babel برای اهداف تولید و توسعه Different Babel Configurations For Production And Development Purposes

• متغیرهای محیط عبور Passing Environment Variables

• استفاده از ویژگی های آزمایشی جاوا اسکریپت در برنامه شما Using Experimental JavaScript Features In Your Application

• راه اندازی TypeScript Setting Up TypeScript

افزایش پشتیبانی مرورگر با Babel Increasing Browser Support With Babel

• راه اندازی کامپایلر Babel Setting Up Babel Compiler

• افزایش پشتیبانی از مرورگر خود با Polyfills Increasing Your Browser Support With Polyfills

• پیکربندی های مختلف Babel برای اهداف تولید و توسعه Different Babel Configurations For Production And Development Purposes

• متغیرهای محیط عبور Passing Environment Variables

• استفاده از ویژگی های آزمایشی جاوا اسکریپت در برنامه شما Using Experimental JavaScript Features In Your Application

• راه اندازی TypeScript Setting Up TypeScript

بهبود تجربه توسعه دهنده خود با نقشه های منبع Improving Your Developer Experience With Source Maps

• نقشه های منبع برای جاوا اسکریپت و CSS Source Maps For JavaScript And CSS

• نقشه های منبع برای کتابخانه های CSS-in-JS Source Maps For CSS-in-JS Libraries

بهبود تجربه توسعه دهنده خود با نقشه های منبع Improving Your Developer Experience With Source Maps

• نقشه های منبع برای جاوا اسکریپت و CSS Source Maps For JavaScript And CSS

• نقشه های منبع برای کتابخانه های CSS-in-JS Source Maps For CSS-in-JS Libraries

تکان دادن درخت Tree Shaking

• تکان دادن درخت چگونه کار می کند. مثال ساده How Tree Shaking Works. Simple Example

• اعمال لرزش درخت در برنامه ما Applying Tree Shaking To Our Application

تکان دادن درخت Tree Shaking

• تکان دادن درخت چگونه کار می کند. مثال ساده How Tree Shaking Works. Simple Example

• اعمال لرزش درخت در برنامه ما Applying Tree Shaking To Our Application

استفاده از تقسیم کد و بارگذاری تنبل در کد تولید شما Applying Code Splitting and Lazy Loading To Your Production Code

• اضافه کردن بوت استرپ در صورت نیاز Adding Bootstrap In Case You Need It

• نحوه تجزیه و تحلیل بسته های تولید شده توسط Webpack How To Analyze Bundles Generated By Webpack

• استراتژی شماره 1: استخراج وابستگی های سنگین در بسته های جداگانه Strategy #1: Extracting Heavy Dependencies Into Separate Bundles

• استراتژی شماره 2: تعیین معیارهای تقسیم کد Strategy #2: Specifying Criteria For Code Splitting

• استراتژی شماره 3: قرار دادن node_modules در بسته نرم افزاری خودش Strategy #3: Putting node_modules Into Its Own Bundle

• استراتژی شماره 4: ایجاد یک بسته جی اس برای هر وابستگی Strategy #4: Creating a JS Bundle For Each Dependency

• استراتژی خود را برای تقسیم کد تعریف کنید Define Your Own Strategy For Code Splitting

• بارگذاری تنبل Lazy Loading

• بارگذاری تنبل چندین ماژول به صورت موازی Lazy Loading Multiple Modules In Parallel

• استفاده از Async Await With Lazy Loaded Modules Using Async Await With Lazy Loaded Modules

استفاده از تقسیم کد و بارگذاری تنبل در کد تولید شما Applying Code Splitting and Lazy Loading To Your Production Code

• اضافه کردن بوت استرپ در صورت نیاز Adding Bootstrap In Case You Need It

• نحوه تجزیه و تحلیل بسته های تولید شده توسط Webpack How To Analyze Bundles Generated By Webpack

• استراتژی شماره 1: استخراج وابستگی های سنگین در بسته های جداگانه Strategy #1: Extracting Heavy Dependencies Into Separate Bundles

• استراتژی شماره 2: تعیین معیارهای تقسیم کد Strategy #2: Specifying Criteria For Code Splitting

• استراتژی شماره 3: قرار دادن node_modules در بسته نرم افزاری خودش Strategy #3: Putting node_modules Into Its Own Bundle

• استراتژی شماره 4: ایجاد یک بسته جی اس برای هر وابستگی Strategy #4: Creating a JS Bundle For Each Dependency

• استراتژی خود را برای تقسیم کد تعریف کنید Define Your Own Strategy For Code Splitting

• بارگذاری تنبل Lazy Loading

• بارگذاری تنبل چندین ماژول به صورت موازی Lazy Loading Multiple Modules In Parallel

• استفاده از Async Await With Lazy Loaded Modules Using Async Await With Lazy Loaded Modules

ایجاد وب سرور اختصاصی شما Creating Your Own Web Server

• چرا ممکن است به وب سرور نیاز داشته باشید Why You May Need a Web Server

• راه اندازی چارچوب Express Setting Up Express Framework

• ادغام چارچوب Express در برنامه Integrating Express Framework Into The Application

• پیاده سازی عملکرد "Watch" و بازسازی خودکار Implementing "Watch" Functionality And Automatic Rebuilds

• اجرای تعویض ماژول داغ Implementing Hot Module Replacement

ایجاد وب سرور اختصاصی شما Creating Your Own Web Server

• چرا ممکن است به وب سرور نیاز داشته باشید Why You May Need a Web Server

• راه اندازی چارچوب Express Setting Up Express Framework

• ادغام چارچوب Express در برنامه Integrating Express Framework Into The Application

• پیاده سازی عملکرد "Watch" و بازسازی خودکار Implementing "Watch" Functionality And Automatic Rebuilds

• اجرای تعویض ماژول داغ Implementing Hot Module Replacement

فشرده سازی کد تولید خود قبل از ارسال آن به مشتریان Compressing Your Production Code Before Sending It To Your Customers

• فشرده سازی Gzip را در Webpack فعال کنید Enable Gzip Compression in Webpack

• سرور وب خود را برای پشتیبانی از Gzip پیکربندی کنید Configure Your Web Server To Support Gzip

• فشرده سازی Brotli را فعال کنید Enable Brotli Compression

فشرده سازی کد تولید خود قبل از ارسال آن به مشتریان Compressing Your Production Code Before Sending It To Your Customers

• فشرده سازی Gzip را در Webpack فعال کنید Enable Gzip Compression in Webpack

• سرور وب خود را برای پشتیبانی از Gzip پیکربندی کنید Configure Your Web Server To Support Gzip

• فشرده سازی Brotli را فعال کنید Enable Brotli Compression

خلاصه Summary

• خلاصه Summary

خلاصه Summary

• خلاصه Summary