渐进式 Web 应用

¥Progressive Web Apps

对于希望快速加载和交互的 渐进式 Web 应用 来说，Preact 是一个绝佳的选择。Preact CLI 将其编码为即时构建工具，为你提供开箱即用的 Lighthouse 分数为 100 的 PWA。

¥Preact is an excellent choice for Progressive Web Apps that wish to load and become interactive quickly. Preact CLI codifies this into an instant build tool that gives you a PWA with a 100 Lighthouse score right out of the box.

1. 加载较少的脚本

   Preact's small size is valuable when you have a tight loading performance budget. On average mobile hardware, loading large bundles of JS leads to longer load, parse and eval times. This can leave users waiting a long time before they can interact with your app. By trimming down the library code in your bundles, you load quicker by shipping less code to your users.

2. 更快的交互时间

   If you're aiming to be interactive in under 5s, every KB matters. Switching React for Preact in your projects can shave multiple KBs off and enable you to get interactive in one RTT. This makes it a great fit for Progressive Web Apps trying to trim down as much code as possible for each route.

3. 与 React 生态系统完美配合的构建块

   Whether you need to use React's server-side rendering to get pixels on the screen quickly or use React Router for navigation, Preact works well with many libraries in the ecosystem.

该网站是一个 PWA

¥This site is a PWA

事实上，你现在访问的网站是一个渐进式 Web 应用！。在这里，它在 3G 上的 Nexus 5X 跟踪中不到 5 秒就实现了交互：

¥In fact, the site you're on right now is a Progressive Web App!. Here it is getting interactive in under 5 seconds in a trace from a Nexus 5X over 3G:

静态站点内容存储在（服务工作线程）缓存存储 API 中，以便在重复访问时即时加载。

¥Static site content is stored in the (Service Worker) Cache Storage API enabling instant loading on repeat visits.

性能提示

¥Performance tips

虽然 Preact 是一个适合你的 PWA 的插件，但它也可以与许多其他工具和技术一起使用。这些包括：

¥While Preact is a drop-in that should work well for your PWA, it can also be used with a number of other tools and techniques. These include:

1. Code-splitting breaks up your code so you only ship what the user needs for a page. Lazy-loading the rest as needed improves page load times. Supported via webpack or Rollup.

2. Service Worker caching allows you to offline cache static and dynamic resources in your app, enabling instant loading and faster interactivity on repeat visits. Accomplish this with Workbox

3. PRPL encourages preemptively pushing or pre-loading assets to the browser, speeding up the load of subsequent pages. It builds on code-splitting and SW caching.

4. Lighthouse allows you to audit the performance and best practices of your Progressive Web App so you know how well your app performs.

Preact CLI

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

¥Preact CLI is the official build tool for Preact projects. It's a single dependency command line tool that bundles your Preact code into a highly optimized Progressive Web App. It aims to make all of the above recommendations automatic, so you can focus on writing great Components.

以下是 Preact CLI 的一些内容：

¥Here are a few things Preact CLI bakes in:

• 为你的 URL 路由自动、无缝地进行代码分割

  ¥Automatic, seamless code-splitting for your URL routes

• 自动生成并安装 ServiceWorker

  ¥Automatically generates and installs a ServiceWorker

• 根据 URL 生成 HTTP2/Push 标头（或预加载元标记）

  ¥Generates HTTP2/Push headers (or preload meta tags) based on the URL

• 预渲染以缩短首次绘制时间

  ¥Pre-rendering for a fast Time To First Paint

• 如果需要，有条件地加载 Polyfill

  ¥Conditionally loads polyfills if needed

由于 Preact CLI 由 Webpack 内部驱动，因此你可以定义 preact.config.js 并自定义构建过程以满足你的需求。即使你进行自定义，你仍然可以利用出色的默认设置，并且可以随着 preact-cli 新版本的发布而进行更新。

¥Since Preact CLI is internally powered by Webpack, you can define a preact.config.js and customize the build process to suit your needs. Even if you customize things, you still get to take advantage of awesome defaults, and can update as new versions of preact-cli are released.