构建现代Web应用：5个基本的前端架构原则

news2025/1/27 12:53:20

本文翻译自 Building modern Web Applications: 5 Essential Frontend Architecture Principles，作者：Patrick Roos，略有删改。

在这篇文章中，我提出了构建现代前端的五个架构原则。我第一次听到这些原则是在Natalia Venditto的一次精彩演讲中。他们打开了我的视野，所以我试图更详细地解释这些原则和我的理解。

Photo by Tim Graf / Unsplash

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

我们应该始终遵循的原则。
- 原则1：异步或延迟加载
- 原则2：有意识地进行Tree-shake、打包和清除无用代码
- 原则3：设定和遵守性能预算
在可能的情况下我们应该遵循的原则。
- 原则4：坚持Web平台API和Web标准
- 原则5：使用新一代前端框架

原则1：异步或延迟加载

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

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

值得一提的是，Google的核心价值观核心要素是定义Web应用程序用户体验的指标。这些指标也会被Google搜索引擎仔细检查。

特别是在客户端渲染场景中，JavaScript模块的加载至关重要。如果我们想加载JavaScript，有三种主要的方法可以做到这一点：

标准方法（不推荐）
使用defer关键字（根据此原则推荐）
使用async关键字（根据此原则推荐）

标准的方式

让我们来看看标准的方法。标准的方式是在html标记中使用一个普通的<script>标签，如下所示：

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

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

以标准方式加载JavaScript

从这个角度来看，有两个缺点：

加载和执行的脚本只能在加载之前读取DOM。
如果脚本是“重量级”的，它可以阻止整个浏览器。

延迟方式

使用defer方式加载JavaScript文件或JavaScript代码是一种更加优雅的解决方案。defer告诉浏览器继续DOM解析并在后台加载脚本。在解析DOM并加载脚本之后再执行脚本。这样的首次初始渲染将是非阻塞的。

<p>...</p>
<script defer src="my-fancy-script.js"></script>
<!-- 这个 p 标签将直接加载 -->
<p>...</p>

使用defer加载脚本

异步方式

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

<p>...</p>
<script async src="my-fancy-script.js"></script>
<!-- 这个 p 标签将直接加载 -->
<p>...</p>

原则2：有意识地进行`Tree-shake`、打包和清除无用代码

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

JS bundle 是将多个JavaScript文件打包到单个文件中的一种方法。捆绑减少了http请求的数量，方便了缓存。Tree-shaking是一种从JavaScript包中删除未使用代码的优化技术。这可以显著减少包的大小，从而可以改善页面加载时间和整体前端性能。

Tree-Shaking

减少bundle大小：Tree-shaking可以显著减少JavaScript bundle的大小。这可以改善页面加载时间和整体性能。
改进的缓存：较小的bundle更有可能被浏览器缓存。这可以进一步改善回访者的加载时间。
减少带宽使用：较小的bundle使用较少的带宽。

如果你正在构建一个现代的JavaScript应用程序，你绝对应该使用Tree-shaking。这是提高应用程序性能的一种简单而有效的方法。

不同的现代JavaScript打包工具支持Tree-shaking优化：

Webpack：https://webpack.js.org/guides/tree-shaking/?ref=workingsoftware.dev
Parcel：https://parceljs.org/?ref=workingsoftware.dev
Rollup：https://rollupjs.org/introduction/?ref=workingsoftware.dev
Vite：https://vitejs.dev/?ref=workingsoftware.dev

原则3：设定和遵守性能预算

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

在前端开发中设定和遵守性能预算对于创建快速，响应和用户友好的Web应用程序至关重要。

使用webpack-bundle-analyzer进行依赖分析

性能预算为各种指标设置了可接受的性能目标，例如Google的Web生命周期，例如首次输入延迟（FID），最大内容绘制（LCP）和交互时间（TTI）。

通过设置这些指标，开发人员可以优先考虑性能优化工作，并确保他们的应用程序满足用户的期望。

制定和坚持性能预算的关键步骤：

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

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

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

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

这个原则很容易理解。尽可能利用Web平台API和Web标准的强大功能。

首先要熟悉本地Web标准，如HTML，CSS和JavaScript。这听起来很简单，但真的吗？

它还涉及到对原生Web平台 API 的能力的了解，例如：

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

有了这些知识，你将能够创建先进和强大的Web应用程序。

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

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

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

与传统框架相比，这些框架提供了几个优势，包括：

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

其中一些框架的列表：