Webpack 5 in 2022: Optimizing For Production

Webpack 5 in 2022: Optimizing For Production

Webpack 5 in 2022: Optimizing For Production

Optimize your Webpack 5 configuration for Production with Code Splitting, Lazy Loading, Gzip compression etc.

Language: english

Note: 0/5 (0 notes) 652 students

Instructor(s): Viktor Pyskunov

Last update: 2022-08-21

What you’ll learn

  • Quickly get started, without long introductions and rambling
  • Optimize your Webpack builds for Production in order to make them as small and efficient as possible
  • Optimize your application loading times to make them as fast as possible
  • Get familiar with 7 ways of handling CSS in your apps (including CSS-in-JS and CSS Modules)
  • Learn everything you need to know about Code Splitting and Lazy Loading
  • Optimize your CSS and Images for Production
  • Configure Gzip compression and Brotli compression
  • Set up Babel the right way
  • Add Source Maps both for JavaScript and CSS
  • Configure TypeScript with Webpack
  • Optimize your Developer Experience by enabling Hot Module Replacement, better Error Handling, etc

 

Requirements

  • Basics of JavaScript
  • Basics of CSS

 

Description

Hi guys and girls, nice to see you here 🙂 This is my 2nd course about Webpack, and this time my goal is to help you understand how you can optimize your Webpack configurations for production use cases. In this course we are going to focus on how to make your Webpack bundles as small as possible, and how to make your application loading times as fast as possible.

This course is specifically designed for those people who already know some Webpack basics, and want to become experts in creating optimized Webpack configurations from scratch as well as improving existing Webpack configurations.

In this course we are going to take an existing web application that’s not using any kind of module bundlers, and apply various Webpack features in order to optimize this application and improve its loading performance. This means you will see how Webpack works in real world use cases. Each lesson builds on top of the previous ones, so it’s very easy to follow.

Here are just a few examples of what we are going to talk about.

In one of the sections, I will show you 7 different approaches of handling CSS in your applications, including CSS Modules and a couple of CSS-in-JS libraries. As a result, you will become familiar with many approaches and you will be able to choose the most suitable one for your specific needs.

In another section, we are going to have a long discussion about Code Splitting and Lazy Loading. Webpack is extremely good at Code Splitting, and we are going to talk about that a lot in this course. I will show you multiple Code Splitting strategies you can apply, and we will even define our own strategy applicable to the application we are developing in this course. After watching this course you won’t ever be frustrated when you hear the words “Code Splitting” again.

Also, we are going to cover topics related to Optimizing Images for Production, Tree Shaking, Compression algorithms, and many more! After watching this course you will definitely have some ideas on how to improve performance of your existing web applications. I can also promise that you will know more about Webpack than the average Front End Developer in your company.

I am regularly updating this course, so you can be sure that this course is always up-to-date and covers the latest Webpack features.

If you have any questions related to Webpack, feel free to post them in Q&A section. Many people have already found answers to their questions in Q&A, and I will be more than happy to help you with your questions as well.

 

Who this course is for

  • All developers with basic JavaScript knowledge

 

Course content

  • Introduction
    • Introduction
    • What you need for this course
  • Setting Up Webpack
    • Setting Up Application
    • Quick Note About The Github Repository
    • Integrating Webpack Into The Application
    • Default Webpack Configuration
    • Separating Code Into Multiple Files
    • Different Configurations for Production and Development Builds
    • Setting Up Webpack-Dev-Server
  • 7 Ways Of Using CSS With Webpack
    • Introduction To Different Ways Of Handling Styles
    • Using Regular CSS With Webpack. Brief Info About Loaders
    • Extracting Generated CSS Into a Separate Bundle
    • Generating HTML Based On Your Custom Template
    • Removing Old Bundles Before Generating New Ones
    • CSS Modules
    • Optimizing Your CSS For Production
    • Using Less Preprocessor For Writing Your Styles
    • Using Sass Together With Webpack
    • Using PostCSS
    • Removing Unused CSS From The Generated Bundles
    • Introduction To CSS-in-JS
    • Using JSS
    • Using Emotion (Another CSS-in-JS Library)
  • Processing Images With Webpack
    • Introduction To Processing Images
    • Processing Images In Development Mode
    • Optimizing Images For Production
  • Increasing Browser Support With Babel
    • Setting Up Babel Compiler
    • Increasing Your Browser Support With Polyfills
    • Different Babel Configurations For Production And Development Purposes
    • Passing Environment Variables
    • Using Experimental JavaScript Features In Your Application
    • Setting Up TypeScript
  • Improving Your Developer Experience With Source Maps
    • Source Maps For JavaScript And CSS
    • Source Maps For CSS-in-JS Libraries
  • 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
    • How To Analyze Bundles Generated By Webpack
    • Strategy #1: Extracting Heavy Dependencies Into Separate Bundles
    • Strategy #2: Specifying Criteria For Code Splitting
    • Strategy #3: Putting node_modules Into Its Own Bundle
    • Strategy #4: Creating a JS Bundle For Each Dependency
    • Define Your Own Strategy For Code Splitting
    • Lazy Loading
    • Lazy Loading Multiple Modules In Parallel
    • Using Async Await With Lazy Loaded Modules
  • Creating Your Own Web Server
    • Why You May Need a Web Server
    • Setting Up Express Framework
    • Integrating Express Framework Into The Application
    • Implementing “Watch” Functionality And Automatic Rebuilds
    • Implementing Hot Module Replacement
  • Compressing Your Production Code Before Sending It To Your Customers
    • Enable Gzip Compression in Webpack
    • Configure Your Web Server To Support Gzip
    • Enable Brotli Compression
  • Summary
    • Summary

 

Webpack 5 in 2022: Optimizing For ProductionWebpack 5 in 2022: Optimizing For Production

Time remaining or 457 enrolls left

 

Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate