Vite 集成

相关源文件

• integration/fog-of-war-test.ts
• integration/helpers/vite.ts
• integration/single-fetch-test.ts
• integration/vite-basename-test.ts
• integration/vite-build-test.ts
• integration/vite-cloudflare-test.ts
• integration/vite-css-test.ts
• integration/vite-dev-custom-entry-test.ts
• integration/vite-dev-test.ts
• integration/vite-dot-client-test.ts
• integration/vite-dot-server-test.ts
• integration/vite-dotenv-test.ts
• integration/vite-hmr-hdr-test.ts
• integration/vite-loader-context-test.ts
• integration/vite-manifests-test.ts
• integration/vite-node-env-test.ts
• integration/vite-prerender-test.ts
• integration/vite-presets-test.ts
• integration/vite-server-bundles-test.ts
• integration/vite-spa-mode-test.ts
• packages/react-router-dev/vite/plugin.ts
• packages/react-router/lib/dom-export/hydrated-router.tsx
• packages/react-router/lib/dom/global.ts
• packages/react-router/lib/dom/ssr/components.tsx
• packages/react-router/lib/dom/ssr/entry.ts
• packages/react-router/lib/dom/ssr/fog-of-war.ts
• packages/react-router/lib/dom/ssr/routes-test-stub.tsx
• packages/react-router/lib/dom/ssr/server.tsx
• packages/react-router/lib/dom/ssr/single-fetch.tsx
• packages/react-router/lib/server-runtime/build.ts
• packages/react-router/lib/server-runtime/data.ts
• packages/react-router/lib/server-runtime/dev.ts
• packages/react-router/lib/server-runtime/routes.ts
• packages/react-router/lib/server-runtime/server.ts
• packages/react-router/lib/server-runtime/serverHandoff.ts
• packages/react-router/lib/server-runtime/single-fetch.ts

此页面介绍了 React Router 和 Vite 之间的集成，涵盖了如何在 Vite 的开发服务器和构建系统中使用 React Router。它解释了 React Router Vite 插件提供的插件架构、开发功能、构建过程优化以及服务器端渲染功能。

概述

React Router Vite 插件（@react-router/dev/vite）提供了与 Vite 的开发服务器和构建系统的无缝集成。它提供了以下功能：

• 路由组件的热模块重载 (HMR)
• 开发期间的服务器端渲染
• 为客户端和服务器进行优化的构建过程
• 单一数据获取策略
• 路由代码分割和优化
• 预渲染能力

来源：packages/react-router-dev/vite/plugin.ts588-594 integration/vite-dev-test.ts16-26

插件架构

Vite 集成的核心是 @react-router/dev/vite 导出的 reactRouterVitePlugin 函数。此函数返回一个 Vite 插件数组，用于处理集成的各个方面。

该插件处理：

1. 配置：从文件中解析 React Router 配置
2. 开发服务器：为开发中的 SSR 设置中间件
3. 构建过程：优化客户端和服务器的构建
4. 资源处理：管理路由模块、CSS 和其他资源

要在 Vite 配置中使用该插件：

来源：packages/react-router-dev/vite/plugin.ts584-686 integration/helpers/vite.ts58-61

开发服务器

开发服务器提供路由的热模块重载 (HMR) 和开发期间的服务器端渲染 (SSR)。

开发中的请求流程

单次获取策略

在开发过程中，React Router 插件采用“单一数据获取”策略来高效地加载路由所需的数据。

• 对于导航，它发送一个请求来加载所有必需的数据。
• 对于操作，它发送一个请求来执行操作。
• 关键 CSS 会为当前路由加载。

开发服务器设置了：

• 用于 SSR 的虚拟服务器构建模块
• 用于路由数据的服务器和浏览器清单
• 路由模块的 HMR，包括样式更新

来源：packages/react-router-dev/vite/plugin.ts1010-1109 packages/react-router/lib/dom/ssr/single-fetch.tsx162-248 packages/react-router/lib/server-runtime/server.ts83-324

构建流程

React Router Vite 插件为客户端和服务器构建都优化了构建过程。

客户端构建

客户端构建过程

1. 创建路由入口点
2. 生成路由清单
3. 优化 CSS 加载
4. 管理资源引用

服务器构建

服务器构建过程

1. 创建服务器入口点
2. 包含具有服务器端代码的路由模块
3. 生成服务器清单
4. 设置 SSR 能力

路由清单

路由清单是客户端和服务器构建的关键部分。它包含有关路由、其资源和其能力的信息。

预渲染

该插件支持在构建时对路由进行预渲染。

1. 路由的静态 HTML 文件
2. 加载器的静态数据文件
3. 支持带有扩展名的资源路由（例如 .json、.txt）

来源：packages/react-router-dev/vite/plugin.ts842-1008 integration/vite-prerender-test.ts132-516

服务器端渲染

React Router 的 Vite 集成在开发和生产中都提供了对服务器端渲染的强大支持。

请求处理程序

SSR 的核心是 createRequestHandler 函数，它：

1. 将传入请求与路由匹配
2. 执行加载器和操作
3. 将应用程序渲染为 HTML
4. 包含用于客户端水合的状态

客户端水合

服务器渲染 HTML 后，客户端会对应用程序进行水合。

1. HydratedRouter 组件使用服务器数据进行初始化。
2. 它解码来自服务器的流式状态。
3. 它使用正确的数据来水合 React 应用程序。
4. 它设置了客户端导航。

来源：packages/react-router/lib/server-runtime/server.ts83-324 packages/react-router/lib/dom-export/hydrated-router.tsx78-253

特殊功能

战争迷雾路由发现

“战争迷雾”路由发现是一项功能，它：

1. 最初只加载当前页面所需的路由。
2. 随着用户导航，逐步发现和加载路由。
3. 当链接出现在视图中时，预取路由。

来源：packages/react-router/lib/dom/ssr/fog-of-war.ts100-184 integration/fog-of-war-test.ts86-96

服务器捆绑包

服务器捆绑包允许将服务器代码分割成多个捆绑包，以提高性能和可扩展性。

1. 每个捆绑包包含一部分路由。
2. 路由可以按功能或部分进行分组。
3. 对于请求，仅加载相关捆绑包。

来源：packages/react-router-dev/vite/plugin.ts514-552 integration/vite-server-bundles-test.ts56-75

CSS 集成

该插件提供了与 Vite 的 CSS 处理的集成。

1. 开发时 CSS 加载（带 HMR）
2. SSR 的关键 CSS 传递
3. CSS Modules 支持
4. PostCSS 集成

SPA 模式

React Router 的 Vite 集成支持 SPA（单页应用程序）模式。

1. 运行时无服务器端渲染
2. 使用 clientLoader 和 clientAction 进行纯客户端数据获取
3. 支持预渲染初始 HTML
4. 为静态托管进行了优化

来源：integration/vite-spa-mode-test.ts19-40 packages/react-router-dev/vite/plugin.ts706-724

环境变量 API 支持

该集成支持 Vite 的环境变量 API，用于自定义环境。

1. 自定义构建环境（客户端、服务器）
2. CSS 开发助手环境
3. 特定于环境的优化

来源：packages/react-router-dev/vite/plugin.ts139-172 integration/vite-dev-test.ts257-259

平台适配

该插件与各种平台适配器集成。

1. Node.js 环境
2. Express 服务器
3. Cloudflare Workers
4. 自定义服务器环境

来源： integration/vite-cloudflare-test.ts22-26 integration/helpers/vite.ts139-181

总结

React Router Vite 集成提供了使用 Vite 开发和构建 React Router 应用程序的全面解决方案。它提供诸如开发时 SSR、优化构建、预渲染和平台特定适配等功能。

要开始，请安装必要的包并将插件添加到你的 Vite 配置中。

有关 React Router 核心概念的更多信息，请参阅 核心概念。