Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Webpack 5: Optimizing For Production

Webpack 5: Tối ưu hóa cho Môi trường Production

Webpack 5: Tối ưu hóa cho Môi trường Production

Tối ưu cấu hình Webpack 5 cho Production với Code Splitting, Lazy Loading, nén Gzip, v.v.

4.6
(460 đánh giá)
4,393 học viên
Giảng viên
Viktor Pyskunov
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 1.519.000đ -97%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
6.0 giờ video
61 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

Bạn sẽ học được gì

Bắt đầu nhanh chóng, không có phần giới thiệu dài dòng
Tối ưu hóa bản build Webpack cho Production để chúng trở nên nhỏ gọn và hiệu quả nhất có thể
Tối ưu thời gian tải ứng dụng để đạt tốc độ nhanh nhất
Làm quen với 7 cách xử lý CSS trong ứng dụng (bao gồm CSS-in-JS và CSS Modules)
Tìm hiểu mọi thứ bạn cần biết về Code Splitting và Lazy Loading
Tối ưu hóa CSS và Hình ảnh cho Production
Cấu hình nén Gzip và nén Brotli
Thiết lập Babel đúng cách
Thêm Source Maps cho cả JavaScript và CSS
Cấu hình TypeScript với Webpack
Cải thiện trải nghiệm lập trình với Hot Module Replacement, xử lý lỗi tốt hơn, v.v.

Yêu cầu

Kiến thức cơ bản về JavaScript
Kiến thức cơ bản về CSS

Đối tượng phù hợp

Dành cho tất cả nhà phát triển có kiến thức JavaScript cơ bản

Nội dung khóa học

11 phần • 61 bài giảng
1 Giới thiệu
2 Những gì bạn cần cho khóa học này
1 Thiết lập Ứng dụng
2 Lưu ý nhanh về Kho lưu trữ Github
3 Tích hợp Webpack vào Ứng dụng
4 Cấu hình Webpack mặc định
5 Tách mã thành nhiều tệp
6 Cấu hình khác nhau cho bản build Production và Development
7 Thiết lập Webpack-Dev-Server
1 Giới thiệu các cách xử lý kiểu dáng khác nhau
2 Sử dụng CSS thông thường với Webpack. Thông tin ngắn gọn về Loaders
3 Trích xuất CSS được tạo thành một bundle riêng biệt
4 Tạo HTML dựa trên mẫu tùy chỉnh của bạn
5 Xóa các bundle cũ trước khi tạo bundle mới
6 Một cách khác để xóa các bundle cũ
7 CSS Modules
8 Tối ưu hóa CSS của bạn cho Production
9 Sử dụng bộ tiền xử lý Less để viết kiểu dáng
10 Sử dụng Sass cùng với Webpack
11 Lưu ý về quy tắc @import của SASS
12 Sử dụng PostCSS
13 Loại bỏ CSS không sử dụng khỏi các bundle được tạo
14 Giới thiệu về CSS-in-JS
15 Sử dụng JSS
16 Sử dụng Emotion (Một thư viện CSS-in-JS khác)
1 Giới thiệu về Xử lý Hình ảnh
2 Xử lý Hình ảnh trong Chế độ Development
3 Tối ưu hóa Hình ảnh cho Production
4 Một cách khác để tối ưu hóa hình ảnh
5 Xử lý số lượng lớn hình ảnh
6 Tạo hình ảnh WEBP từ JPEG hoặc PNG
7 Lưu ý nhanh về Tối ưu hóa Hình ảnh
1 Thiết lập trình biên dịch Babel
2 Tăng cường hỗ trợ trình duyệt với Polyfills
3 Cấu hình Babel khác nhau cho mục đích Production và Development
4 Truyền Biến môi trường
5 Sử dụng các tính năng JavaScript thử nghiệm trong ứng dụng của bạn
6 Thiết lập TypeScript
1 Source Maps cho JavaScript và CSS
2 Source Maps cho các thư viện CSS-in-JS
1 Cách Tree Shaking hoạt động. Ví dụ đơn giản
2 Áp dụng Tree Shaking cho Ứng dụng của chúng ta
1 Thêm Bootstrap trong trường hợp bạn cần
2 Cách phân tích các bundle được tạo bởi Webpack
3 Chiến lược #1: Trích xuất các phụ thuộc nặng thành các bundle riêng biệt
4 Chiến lược #2: Chỉ định tiêu chí cho Code Splitting
5 Chiến lược #3: Đặt node_modules vào bundle riêng của nó
6 Chiến lược #4: Tạo một bundle JS cho mỗi phụ thuộc
7 Xác định chiến lược Code Splitting của riêng bạn
8 Lazy Loading
9 Lazy Loading nhiều mô-đun song song
10 Sử dụng Async Await với các mô-đun được tải lười
1 Tại sao bạn có thể cần một máy chủ web
2 Thiết lập framework Express
3 Tích hợp framework Express vào Ứng dụng
4 Triển khai chức năng "Watch" và Tự động rebuild
5 Triển khai Hot Module Replacement
1 Bật nén Gzip trong Webpack
2 Cấu hình máy chủ web của bạn để hỗ trợ Gzip
3 Bật nén Brotli
1 Tổng kết

Giới thiệu khóa học

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.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Build Tools
Hiển thị tất cả khoá học Frontend Optimization
Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊