2023 年的 Webpack 5:针对生产进行优化

Webpack 5 in 2023: Optimizing For Production

通过代码分割、延迟加载、Gzip 压缩等优化您的 Webpack 5 配置以进行生产

你将学到什么

  • 快速上手,无需长篇介绍和废话
  • 优化您的 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 相关的问题,请随时在 Q&A 部分发布。很多人已经在问答中找到了问题的答案,我也很乐意帮助您解决问题。

本课程适合谁:

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

 

 

2023-12-1 更新夸克链接 修复视频缺少的问题

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。