渐进式 Web 应用

对于希望快速加载并实现交互的 渐进式 Web 应用，Preact 是一个极佳的选择。Preact CLI 将其编入一个即时构建工具中，该工具可立即为您提供一个 100 Lighthouse 分的 PWA。

1. 加载更少的脚本

   当您有严格的加载性能预算时，Preact 的 小巧 非常有价值。在一般的移动硬件上，加载大量的 JS 捆绑包会导致更长的加载、解析和评估时间。这可能会让用户在与您的应用进行交互之前等待很长时间。通过精简捆绑包中的库代码，您可以通过向用户发送更少的代码来更快地加载。

2. 更快的交互时间

   如果您希望在 5 秒内实现交互，则每个 KB 都很重要。在您的项目中将 React 切换为 Preact 可以节省多个 KB，并使您能够在一次 RTT 中实现交互。这使其非常适合渐进式 Web 应用，因为渐进式 Web 应用尝试为每个路由精简尽可能多的代码。

3. 与 React 生态系统配合得非常好的构建模块

   无论您需要使用 React 的 服务器端渲染 来快速在屏幕上显示像素，还是使用 React Router 进行导航，Preact 都可以与生态系统中的许多库很好地配合使用。

此网站是一个 PWA

事实上，您现在访问的网站是一个渐进式 Web 应用！以下是在 3G 网络中使用 Nexus 5X 从跟踪中在 5 秒内实现交互的情况

静态网站内容存储在（服务工作线程）缓存存储 API 中，从而能够在重复访问时即时加载。

性能提示

虽然 Preact 是一款适用于您的 PWA 的嵌入式工具，但它也可以与许多其他工具和技术配合使用。其中包括

1. 代码拆分将您的代码拆分，以便您仅发布用户对页面所需的内容。根据需要延迟加载其余内容可改善页面加载时间。通过 webpack 或 Rollup 提供支持。

2. Service Worker 缓存允许您在应用中离线缓存静态和动态资源，从而在重复访问时实现即时加载和更快的交互性。使用 Workbox 实现此功能

3. PRPL鼓励预先将资产推送到浏览器或预加载资产，从而加快后续页面的加载速度。它建立在代码拆分和 SW 缓存的基础上。

4. Lighthouse允许您审核渐进式网络应用的性能和最佳做法，以便您了解应用的性能如何。

Preact CLI

Preact CLI 是 Preact 项目的官方构建工具。它是一个单一依赖项命令行工具，可将您的 Preact 代码打包到一个高度优化的渐进式网络应用中。它的目标是使上述所有建议自动执行，以便您可以专注于编写出色的组件。

以下是 Preact CLI 内置的一些功能

• 针对您的 URL 路由的自动无缝代码拆分
• 自动生成并安装 ServiceWorker
• 根据 URL 生成 HTTP2/Push 标头（或预加载元标记）
• 预渲染以实现快速首次绘制时间
• 根据需要有条件地加载 polyfill

由于 Preact CLI 内部由 Webpack 提供支持，因此你可以定义一个 preact.config.js 并自定义构建流程以满足你的需求。即使你自定义了某些内容，你仍然可以利用出色的默认设置，并且可以在发布 preact-cli 的新版本时更新。