【Udemy中英字幕】Webpack 5: Optimizing For Production

Webpack 5：针对生产环境进行优化

使用代码拆分、延迟加载、Gzip 压缩等优化 Webpack 5 配置以适应生产环境。

讲师：Viktor Pyskunov

双语IT资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！

用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。

您将学到什么

• 快速上手，无需冗长的介绍和冗长的叙述
• 针对生产环境优化 Webpack 构建，使其尽可能小巧高效
• 优化应用程序加载时间，使其尽可能快
• 熟悉在应用程序中处理 CSS 的 7 种方法（包括 CSS-in-JS 和 CSS 模块）
• 了解有关代码拆分和延迟加载的所有知识
• 针对生产环境优化 CSS 和图像
• 配置 Gzip 压缩和 Brotli 压缩
• 正确设置 Babel
• 为 JavaScript 和 CSS 添加源映射
• 使用 Webpack 配置 TypeScript
• 通过启用热模块替换、更好的错误处理等来优化您的开发人员体验

探索相关主题

要求

• JavaScript 基础知识
• CSS 基础知识

描述

大家好，很高兴在这里见到你们 🙂 这是我的第二门 Webpack 课程，这次我的目标是帮助大家了解如何针对生产环境优化 Webpack 配置。在本课程中，我们将重点讲解如何让 Webpack 打包文件尽可能小，以及如何尽可能缩短应用程序的加载时间。

本课程专门针对那些已经了解一些 Webpack 基础知识，并希望成为从头开始创建优化的 Webpack 配置以及改进现有 Webpack 配置的专家的人而设计。

在本课程中，我们将以一个未使用任何模块打包器的现有 Web 应用程序为例，应用各种 Webpack 功能来优化该应用程序并提升其加载性能。这意味着您将了解 Webpack 在实际用例中的工作原理。每节课都建立在之前的课程基础之上，因此非常容易理解。

以下只是我们将要讨论的几个例子。

在其中一节中，我将向您展示在应用程序中处理 CSS 的 7 种不同方法，包括 CSS 模块和一些 CSS-in-JS 库。通过学习，您将熟悉多种方法，并能够根据自己的特定需求选择最合适的方法。

在另一部分，我们将详细讨论代码拆分和延迟加载。Webpack非常擅长代码拆分，我们将在本课程中大量讨论这一点。我将向您展示多种可应用的代码拆分策略，我们甚至会在本课程中定义适用于我们正在开发的应用程序的自定义策略。观看完本课程后，当您再次听到“代码拆分”这个词时，您将不再感到沮丧。

此外，我们还将涵盖生产环境图像优化、Tree Shaking、压缩算法等诸多主题！看完本课程后，您一定会对如何提升现有 Web 应用程序的性能有所了解。我保证，您对 Webpack 的了解程度将超过公司里的普通前端开发人员。

我会定期更新本课程，因此您可以确保本课程始终是最新的并涵盖最新的 Webpack 功能。

如果您有任何关于 Webpack 的问题，欢迎在问答区提问。很多人已经在问答区找到了问题的答案，我也非常乐意为您解答。

本课程适合哪些人：

• 所有具备 JavaScript 基本知识的开发人员