构建现代 Web App：五大核心前端架构原则（译）

大家好，这里是大家的林语冰。本期《前端翻译计划》分享的是来自 Vue 官方资讯推荐的一篇博客，略有删改。

免责声明

本文属于是语冰的直男翻译了属于是，仅供粉丝参考，英文原味版请临幸 Building modern Web Applications: 5 Essential Frontend Architecture Principles。

在本文中，我将介绍构建现代前端的五个架构原则。我第一次听说这些原则是在纳塔利娅·文迪托（Natalia Venditto）的一次精彩演讲中。它们让我大开眼界，所以我尝试更详细地解释这些原则和我对它们的解读。

在她的演讲中，她将前端架构的原则分为两部分。

我们应该始终坚持的原则 。
- 原则 1：异步或延迟加载，考虑关键路径
- 原则 2：tree-shake，刻意打包和消灭死代码
- 原则 3：定义并遵守性能预算
我们应该尽可能遵循的原则 。
- 原则 4：坚持 Web 平台 API 和 Web 标准
- 原则 5：使用新一代前端框架

无论如何，这些要点都非常有用，理论上指导您开发前端，以便您实现质量目标，比如性能效率、可移植性、兼容性、可扩展性和弹性。

异步或延迟加载，考虑关键路径

这是我们应该始终遵循的原则。

前端开发中，图像、字体和 JS（JavaScript）等 Web 资产的加载策略是关键。

值得一看的是谷歌核心指标。核心指标是定义 Web App 用户体验的指标。谷歌搜索引擎也会对这些指标进行精密检查。

尤其在在客户端渲染方案中，JS 模块加载至关重要。因此，如果我们想加载 JS，主要有三种方法可以实现：

标准方案（不推荐）
带 defer 关键字（根据此原则推荐）
带 async 关键字（根据此原则推荐）

标准方案

让我们来瞄一眼标准方式。标准方式是 html 标记中的普通 <script> 标签，如下所示：

html 复制代码

<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script src="script.js" />
    ...
  </body>
</html>

如果我们在这种情况下查看浏览器的时间线和行为，这种加载 JS 方式的缺点如下所示。

从这个角度来看，存在两个短板：

加载和执行的脚本能且仅能在加载前读取 DOM。
如果是"重量级"脚本，它可以阻塞整个浏览器。

延迟方案

使用 defer 方式加载 JS 文件或代码是一种更优雅的技术方案。defer 告诉浏览器继续进行 DOM 解析并在后台加载脚本。解析 DOM 并加载脚本后，将执行脚本。这引导了非阻塞的首次初始渲染。

html 复制代码

<p>...</p>
<script defer src="my-fancy-script.js"></script>
<!-- 此 p 标签会被直接渲染 -->
<p>...</p>

异步方案

加载具有 async 属性的脚本会将加载标识为完全独立。这意味着，浏览器不会等待异步脚本。它是完全独立加载和执行的。

html 复制代码

<p>...</p>
<script async src="my-fancy-script.js"></script>
<!-- This p tag will be directly rendered -->
<p>...</p>

原则 2：tree-shake，可以打包并消除死代码

这是我们应该始终遵循的原则。

JS 打包是一种将多个 JS 文件打包到一个文件中的方案。打包可以减少 http 请求数量并简化缓存。tree-shaking 是一种优化技术，可从 JS 包中移除未使用的代码。这可以显著减小打包体积，从而缩短页面加载时间和提高整体前端性能。

通过激活 tree-shaking，我得到了以下好处：

减小打包体积：tree-shaking 可以显著减小 JS 打包体积。这可以缩短页面加载时间和提高整体性能。
改进缓存：较小打包更可能被浏览器缓存。这可以进一步缩短回访者的加载时间。
减少带宽使用：较小打包使用较少的带宽。

如果您正在构建一个现代 JS App，您绝对应该使用 tree-shaking。这是提高 App 性能的一种简单有效的方案。

不同的现代 JS 打包器支持 tree-shaking：

Webpack
Parcel
Rollup
Vite
......

原则 3：定义并遵守性能预算

这是我们应该始终遵循的原则。

在前端开发中，设置并遵守性能预算对于创建快速、响应迅速且用户友好的 Web App 至关重要。

性能预算为各种指标设定了可接受的效果目标，比如谷歌网络指标，比如首次输入延迟（FID）、最大内容绘制（LCP）和互动时间（TTI）。

通过设置这些指标，开发者可以确定性能优化工作的优先级，并确保其 App 满足用户欲望。

设置和遵守性能预算的关键步骤：

设定性能目标：确定对用户体验至关重要的关键性能指标。这些指标可以包括 FID、LCP、TTI 和其他基于用户需求和欲望的指标。
性能分析：使用 Lighthouse 等工具测评 App 的当前性能。这将使您在进行任何优化之前对 App 的性能有一个基本的了解。
识别巨型阻塞型打包：使用打包分析器（比如 webpack-bundle-analyzer）来识别导致性能问题的特定前端打包。
明确优化优先级：根据已识别的性能瓶颈，确定优化的优先级，首先解决最关键的问题。专注于改进对用户体验影响最大的指标。
持续监控性能：持续监控 Web App 的性能，以确保其保持在设定的性能预算范围内。将 Lighthouse CI 等工具集成到 CI/CD 管道中，以自动执行性能测试和报告。
按需调整性能预算：随着 App 的发展和用户期望的变化，请查看性能预算并根据需要调整阈值。这将确保 Web App 继续提供高质量的用户体验。

通过执行这些步骤，您可以有效地设置和遵守性能预算，并确保前端 App 在速度、响应能力和整体用户体验方面满足用户欲望。

原则 4：坚持 Web 平台 API 和 Web 标准

这是我们应尽可能遵循的原则。

此原则乃下里巴人。尽可能利用 Web 平台 API 和 Web 标准的强大功能。

首先要熟悉 HTML、CSS 和 JS 等原生 Web 标准。这听起来易如反掌，但果真如此吗？

此外，它还涉及原生 Web 平台 API 的功能，举个栗子：

Web Storage API
Geolocation API
Media Capture and Streams API
Notifications API
Web RTC API
Payment Request API
......

有了这些知识，您将能够创建高大上的 Web App。

原则 5：使用新一代前端框架

这是我们应尽可能遵循的原则。

这有利于使用现代和创新的前端开发框架来创建用户界面。

与传统框架相比，这些框架具有多项优势，包括但不限于：

提高性能和效率：新一代框架旨在优化性能并减少创建高级用户界面所需的代码量。这样可以加快渲染速度、提高响应速度并更有效地利用资源。
提高开发者的工作效率：这些框架通常提供一种更结构化的方法来创建和维护复杂的 App。这可以显著提高开发效率，并减少将新功能推向市场所需的时间。
活跃且不断发展的社区：这些框架通常拥有庞大且活跃的开发者社区，它们为其开发做出贡献，提供支持并分享知识。这培养了一个充满活力的工具、库和最佳实践生态系统，进一步增强了开发体验。

其中一些框架的列表：

React
Vue.js
Angular
Svelte
Solid.js
Lit
Qwik

您现在收看的是前端翻译计划，学废了的小伙伴可以订阅此专栏合集，我们每天佛系投稿，欢迎持续关注前端生态。谢谢大家的点赞，掰掰~