开发工具

概述

React Router 的开发工具主要打包在 @react-router/dev 中，它提供了与现代构建工具（尤其是 Vite）的无缝集成。这些工具支持自动路由发现、优化构建、类型生成和简化的服务器端渲染等功能。

开发工具协同工作，提供从项目初始化到开发和部署的统一开发体验。

来源

Vite 插件架构

React Router Vite 插件 (@react-router/dev/vite) 是实现高级构建功能的核心组件。它挂钩到 Vite 的插件系统，为 React Router 应用程序提供专门的处理。

该插件创建一个专门的上下文，用于存储有关路由、资产和构建配置的信息。该上下文在整个构建过程中用于生成客户端和服务器环境的优化输出。

主要功能

路由发现和处理：该插件根据文件系统约定自动发现和处理路由。
服务器端渲染支持：包括对服务器端渲染的专门处理，例如 Single Fetch 等数据加载策略。
构建优化：执行针对 React Router 应用程序的构建时优化，例如代码分割、树抖动和死代码消除。
热模块替换 (HMR)：支持高级 HMR，可在开发过程中保留应用程序状态。

来源

构建流程

React Router 开发工具中的构建过程旨在为客户端和服务器环境创建优化的包。

客户端构建

客户端构建过程会为浏览器创建优化的 JavaScript 包。关键方面包括：

路由模块生成：创建处理客户端导航的专用路由模块
代码分割：按路由自动分割代码以优化加载性能
资产管理：以适当的优化方式处理 CSS、图像和其他资产

服务器构建

服务器构建过程会创建专为服务器端渲染设计的包

服务器包生成：为服务器环境创建专用包
数据加载优化：包括对 Single Fetch 等数据加载策略的优化
特定环境构建：可以为不同的服务器环境（Node.js、Cloudflare 等）创建不同的构建

Manifest 生成

构建过程的关键部分是 manifest 文件的生成

客户端 Manifest：包含有关路由、资产和客户端入口点的信息
服务器 Manifest：包含经过优化以用于服务器端渲染的类似信息

这些 manifest 在开发和生产过程中都会被使用，以支持代码分割、预取和优化的数据加载等功能。

来源

服务器端渲染支持

React Router 的开发工具包括对服务器端渲染（SSR）的全面支持。这包括对数据加载、hydration 和特定环境适配的专门处理。

Single Fetch API

React Router SSR 的主要优化之一是 Single Fetch API，它允许在一个请求中加载页面所需的所有数据。这是通过以下方式实现的：

服务器端数据聚合：在服务器上收集所有必需的数据
客户端数据解码：在客户端高效地解码和 hydrate 数据
优化后的重新验证：智能的重新验证策略，以尽量减少不必要的数据获取

水合作用

开发工具包括对 hydrate 服务器渲染应用程序的专门处理

状态传输：有效地将状态从服务器传输到客户端
渐进式 Hydration：支持渐进式 Hydration 以提高性能
错误恢复：优雅地处理 Hydration 过程中的错误

来源

预渲染

React Router 的开发工具支持预渲染，它允许在构建过程中生成静态 HTML，以提高性能和 SEO。

配置选项

预渲染可以通过几种方式配置：

布尔开关：简单的 prerender: true 来预渲染所有静态路由
路径列表：提供一个明确的要预渲染的路径列表
自定义函数：提供一个返回要预渲染的路径的函数，该函数可以访问路由信息

数据处理

对于每个预渲染的页面，React Router 会：

生成页面的完整 HTML
创建包含页面 loader 数据的 .data 文件
为特定页面优化资产

这种方法允许静态托管预渲染的内容，同时能够动态更新客户端上的数据。

来源

环境 API 和服务器包

React Router 的开发工具通过灵活的环境 API 和服务器包生成来支持不同的服务器环境。

环境 API

环境 API 允许对不同环境进行专门处理

客户端环境：针对浏览器执行进行优化
服务器环境：针对服务器端渲染进行优化
自定义环境：支持 Cloudflare Workers 等自定义环境

服务器包

服务器包允许将服务器端代码拆分成多个包以进行优化加载

基于路由的打包：将相关路由分组到包中
特定环境打包：为不同的服务器环境创建专用包
优化加载：仅加载处理特定请求所需的代码

来源

类型生成

开发工具包括路由的自动类型生成，这可以改善使用 TypeScript 的开发体验。

生成的类型

类型生成系统为每个路由创建专门的类型

Loader 数据类型：loader 函数的强类型返回值
Action 数据类型：action 函数的强类型返回值
URL 参数类型：基于路由模式的类型化 URL 参数
组件 Props：路由组件的正确类型化 Props

与 IDE 集成

生成的类型与支持 TypeScript 的 IDE 无缝集成，提供：

自动补全：路由数据的智能代码补全
类型检查：对数据使用的编译时检查
重构支持：跨路由边界的安全重构

来源

命令行工具

React Router 包含一套用于项目创建、开发和构建的命令行工具。

create-react-router

create-react-router 工具用于引导新的 React Router 项目

项目模板：适用于不同用例的各种入门模板
依赖设置：自动安装必要的依赖项
配置：设置初始配置文件

开发命令

react-router dev 命令运行一个开发服务器，提供：

热模块替换：在开发过程中保留状态
TypeScript 集成：实时类型检查
SSR 开发：开发模式下的服务器端渲染

构建命令

react-router build 命令创建生产构建

优化：生产优化包
特定环境构建：客户端和服务器的不同构建
预渲染：可选的路由静态预渲染

来源

平台集成

React Router 的开发工具集成了各种平台和服务器环境。

Node.js 集成

@react-router/node 包提供了核心的 Node.js 功能

请求处理：核心请求处理逻辑
响应生成：用于生成 HTTP 响应的实用程序
数据序列化：Node.js 特定的数据序列化实用程序

服务器集成

针对不同服务器环境的专用包

Express：与 Express.js 服务器集成
Cloudflare：支持 Cloudflare Workers
Architect：通过 Architect 集成 AWS Lambda
Serve：用于 React Router 应用程序的独立生产服务器

这些集成允许 React Router 应用程序部署到各种环境，并提供优化的服务器端渲染支持。

来源

高级特性

React Router 的开发工具包含多项高级功能，可同时增强开发体验和生产性能。

Fog of War

“Fog of War” 功能通过仅加载当前路由的代码，然后根据需要逐步发现和加载路由，来优化初始包大小。

该系统：

最小化初始 JavaScript 包大小
在用户导航时逐步发现路由
在导航之前预取路由代码，实现平滑过渡

来源

拆分路由模块

拆分路由模块功能将客户端和服务器端路由代码分开，以实现最佳包大小。

此功能：

在适当的时候将 loader 和 action 代码与客户端捆绑包分离
将 clientLoader 和 clientAction 保留在客户端捆绑包中
确保共享组件在两种环境中都可用

来源

测试基础设施

React Router 的开发工具包含全面的测试基础设施，用于验证不同环境下的功能。

集成测试

代码库包含广泛的集成测试，用于验证

开发模式：开发服务器功能的测试
构建过程：构建输出的验证
SSR 行为：服务器端渲染的测试
客户端导航：客户端导航的测试

测试辅助函数

专门的测试助手有助于测试 React Router 应用程序

夹具创建：用于创建测试夹具的实用程序
应用挂载：用于挂载应用程序实例的助手
请求模拟：用于模拟 HTTP 请求的工具

来源

结论

React Router 的开发工具提供了一套全面的实用程序，用于构建、优化和部署 React Router 应用程序。这些工具与 Vite 等现代构建系统深度集成，以提供优化的开发体验和高性能的生产构建。

主要功能包括

用于优化构建的 Vite 插件
支持服务器端渲染
用于改善开发体验的类型生成
适用于各种部署环境的平台特定适配
高级优化技术，如战争迷雾 (Fog of War) 和拆分路由模块 (Split Route Modules)

这些工具协同工作，能够开发出快速、类型安全且易于维护的 React Router 应用程序。