Webpack 5 in 2022: Optimizing For Production
- Description
- Curriculum
- FAQ
- Reviews
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.
-
3
Setting Up ApplicationIn this video, we are going to create a basic setup for the future videos. We are going to clone the Github repository with initial code that we'll be using throughout this course.
-
4
Quick Note About The Github RepositoryHere I am explaining how to use Github Repository associated with this course. This Github Repository contains all the code related to all lessons.
-
5
Integrating Webpack Into The Application
In this video we are going to install Webpack and integrate it into the initial application we downloaded in the previous video.
-
6
Default Webpack Configuration
In this video I will show you how the default Webpack configuration looks like.
-
7
Separating Code Into Multiple Files
In this video we are going to apply Separation of Concerns principle and separate our code into multiple files according to their domains.
-
8
Different Configurations for Production and Development Builds
Here we are going to talk about differences in purposes of Production and Development builds. We are also going to create different Webpack configurations, one for Production, and the other one for Development.
-
9
Setting Up Webpack-Dev-Server
In this video we are going to set up Webpack-Dev-Server in order to improve the Developer Experience of those working on this application.
-
10
Introduction To Different Ways Of Handling Styles
Introduction To Different Ways Of Handling Styles With Webpack.
-
11
Using Regular CSS With Webpack. Brief Info About Loaders
In this video we are going to see how to handle regular CSS with Webpack.
-
12
Extracting Generated CSS Into a Separate Bundle
In this video we are going to improve loading times of your app by extracting your CSS into a separate bundle.
-
13
Generating HTML Based On Your Custom Template
Webpack is capable of generating custom HTML files based on your templates. In this video we are going to discover this possibility.
-
14
Removing Old Bundles Before Generating New Ones
When using bundle names with hashes, dist directory becomes cluttered quite fast. In this video we will see how to clean our dist folder before generating new bundles.
-
15
CSS Modules
In this video you will learn how to handle CSS Modules with Webpack.
-
16
Optimizing Your CSS For Production
In this video we are going to have a look at how we can optimize our css that's generated by Webpack during the build process.
-
17
Using Less Preprocessor For Writing Your Styles
In this video we will learn how to use LESS preprocessor when writing your styles.
-
18
Using Sass Together With Webpack
In this video you will see how you can set up SASS together with Webpack.
-
19
Using PostCSS
In this video we are going to talk about PostCSS.
-
20
Removing Unused CSS From The Generated Bundles
In case you are using some kind of a CSS framework in your applications, you often end up including the whole CSS framework into your production code. In this video we are going to talk how to detect and remove those parts of production CSS code that's not used in your application.
-
21
Introduction To CSS-in-JS
In this video we are going to talk what CSS-in-JS is as well as touch some of the benefits of CSS-in-JS and its drawbacks.
-
22
Using JSS
In this video we are going to have a look at one of those implementations that's called JSS.
-
23
Using Emotion (Another CSS-in-JS Library)
In this video we are going to have a look at one more CSS-in-JS library that's called Emotion.
-
24
Introduction To Processing Images
This video is an introduction to a short section where we are going to talk about how to handle images via Webpack.
-
25
Processing Images In Development Mode
In this video I will show you how to configure Webpack in order to process images in development mode.
-
26
Optimizing Images For Production
In this video we are going to see how we can optimize images in production mode.
-
27
Setting Up Babel Compiler
In this video we are going to add Babel to our configuration. Babel is a JavaScript compiler that can convert ECMAScript 2015+ and above into a backwards compatible version of JavaScript that is supported in every browser out there.
-
28
Increasing Your Browser Support With Polyfills
In this video you will learn how to increase your browser support by adding polyfills for missing JavaScript features.
-
29
Different Babel Configurations For Production And Development Purposes
In this video you will see how you can specify different Babel configurations for production and development environments.
-
30
Passing Environment Variables
In this video you will see how you can specify Environment Variables in a way that works in all Operating Systems
-
31
Using Experimental JavaScript Features In Your Application
In this video you will see how you can use experimental JavaScript features not supported by any browser yet.
-
32
Setting Up TypeScript
In this video we are going to add TypeScript support in our application.
-
37
Adding Bootstrap In Case You Need It
In this video we are going to add a couple of heavy dependencies to our application just as an example. In the future videos I will show you how to optimize the application that's using multiple heavy dependencies.
-
38
How To Analyze Bundles Generated By Webpack
In this video I will show you how you can analyze JavaScript bundles generated by Webpack in order to improve your code splitting strategy.
-
39
Strategy #1: Extracting Heavy Dependencies Into Separate Bundles
In this video you will learn how you can extract specific dependencies into separate bundles.
-
40
Strategy #2: Specifying Criteria For Code Splitting
In this video you will see that Webpack can figure out by itself which modules should be generated as separate bundles, you just need to tell Webpack which criteria it should use.
-
41
Strategy #3: Putting node_modules Into Its Own Bundle
In this video we are going to put all dependencies from the node_modules folder into a separate JavaScript bundle.
-
42
Strategy #4: Creating a JS Bundle For Each Dependency
In this video we are going to put each dependency from node_modules folder into its own bundle.
-
43
Define Your Own Strategy For Code Splitting
In this video I am going to define my own strategy for the application we are building in this course.
-
44
Lazy Loading
In this video you are going to learn what Lazy Loading is about, and how you can configure lazy loading in your application.
-
45
Lazy Loading Multiple Modules In Parallel
In this video you will see that sometimes you need to lazy load multiple JavaScript modules at once.
-
46
Using Async Await With Lazy Loaded Modules
In this video we are going to convert usages of lazy loaded modules to Async / Await.
-
47
Why You May Need a Web Server
In this video we are going to talk about why you may need a web server for your web application.
-
48
Setting Up Express Framework
We are going to have a look at how to install Express Framework.
-
49
Integrating Express Framework Into The Application
In this video we are going to modify our simple web server in order to serve our own HTML page together with JavaScript and CSS files.
-
50
Implementing "Watch" Functionality And Automatic Rebuilds
In this video we are going to implement "compile and watch" functionality (similar to what Webpack Dev Server provides).
-
51
Implementing Hot Module Replacement
In this video we continue implementing the same functionality as provided by Webpack Dev Server. This time we are going to add Hot Module Reloading feature to our setup.
-
52
Enable Gzip Compression in Webpack
In this video we're going to learn how to enable gzip compression in Webpack.
-
53
Configure Your Web Server To Support Gzip
In order to benefit from compressing generated bundles, you need to configure your Web Server accordingly.
-
54
Enable Brotli Compression
In this video we are going to talk about Brotli compression as well as compare it to gzip compression.
