使用 JavaScript 框架构建生产级渐进式 Web 应用

上周的 Google I/O 大会上，Addy Osmani 发布了一些令人惊叹的开发资源，用于创建以 JavaScript 框架为优先的渐进式 Web 应用 (PWA)，这些框架将性能放在首位。

这绝对是一个团队合作的结果，许多人共同努力使这些项目得以进行，这对社区来说是一个非常宝贵的贡献。许多人希望为他们选择的框架获得更好的性能，但无法为这种努力投入时间和资源。能够从高性能和良好的 Lighthouse 得分基础开始，这非常宝贵，使开发人员能够在不牺牲速度和用户体验的情况下，同时享受令人兴奋的框架的生产力和人体工程学。

以下是一些亮点！

Addy 创建了一个网站，用于探索他们使用不同的 PWA 解决方案构建的一些模板，作为非常受欢迎的 TodoMVC 的继任者，名为 HN PWA。您可以探索 所有演示和 GitHub 代码库。然后，他介绍了每个框架重建为 PWA 的一些主要公司实现。在 Addy 展示的许多案例研究中，构建更好 Web 体验的主要内容在于 link rel=preload、requestIdleCallback() 和 HTTP2 服务器推送。有很多提及 PRPL 模式，本质上是优先考虑您将首先使用的内容，通过推送初始 URL 路由的关键资源、渲染初始路由、预缓存其余路由，以及延迟加载和按需创建其余路由。许多性能提升都在能够在 5 秒内在移动设备上进行交互，以及尝试降低框架本身的开销，以便您在这 5 秒内有更多时间用于自己的应用程序代码。

React

React 宣布 Create React App 现在默认情况下将成为 PWA！这是一个重大胜利。他们现在使用带有离线优先缓存策略的服务工作者、使用动态 import() 进行代码拆分、提供错误的帮助覆盖层，并且为您提供1.5 秒的额外时间用于您的应用程序代码。 有关发布的更多信息 在这里。

Preact

现在拥有 CLI！在活动中宣布，这是一个非常棒的开发成果，值得尝试一下。您可以 在这里找到项目。除了您可以在自述文件中阅读的其他非常棒的功能之外，它还具有开箱即用的 100/100 Lighthouse 得分，以及惊人的3 秒额外时间来处理您自己的应用程序代码。

如果您不熟悉 Preact，它是一个极快的 3kb React 替代方案，具有相同的 API，包括组件和虚拟 DOM 的使用。它类似于 React，但小文件大小是软件设计的核心。提到的唯一警告是，由于它强调精简构建，因此 React 生态系统中可能还有一些产品需要进行工作才能无缝集成。也就是说，Preact 是这里性能的绝对赢家，所以我不奇怪看到社区团结起来支持这个解决方案。

Vue

Vue 宣布了一个 PWA 模板，直接从 Vue-cli 提供，您可以使用 vue init pwa 轻松访问。

在许多很棒的功能中，它为您提供了在移动设备上使用应用程序代码的2 秒额外时间、使用动态 import() 进行代码拆分、用于离线缓存的服务工作者，以及预加载或预取 JS 块。

如果您不熟悉 Vue，我已经在这里写了一篇 指南。我认为 Vue 是一款很棒的软件，能够从一开始就满足所有 Lighthouse 标准真是太棒了。此工作流程使创建漂亮且复杂的应用程序变得如此容易。

这篇文章中还有很多细节我没有涉及，Addy 是一位很棒的演讲者。他甚至为他的演讲制作了一款电子游戏。值得您完整观看，您可以在这里观看