Remix ❤️ Vite

今天，我们很高兴宣布 Remix v2.2.0 中已提供对 Vite 的不稳定支持！现在，使用 Remix 时，您可以开箱即用地享受 Vite 的闪电般快速的 DX ⚡️ 的所有优势。

立即试用！

# minimal server
npx create-remix@latest --template remix-run/remix/templates/unstable-vite

# custom Express server
npx create-remix@latest --template remix-run/remix/templates/unstable-vite-express

查看新的文档，了解如何在 Remix 中使用 Vite

那么，什么是闪电般的速度 ⚡️？好吧，我们在 Indie Stack 上使用 M1 Max MacBook Pro 进行了一些快速测试，以下是我们的发现

HMR 速度提高了 10 倍 🔥
HDR 速度提高了 5 倍 🔥

但我们切换到 Vite 不仅仅是为了速度。与传统的构建工具不同，Vite 专为构建框架而设计.

事实上，有了 Vite，Remix 不再是编译器。Remix 本身只是一个 Vite 插件

// vite.config.ts
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [remix()],
});

这样，您还可以访问完整的 Vite 插件生态系统。这让我们能够专注于使 Remix 的核心达到最佳状态，同时让 Vite 插件处理其余工作。想要将 SVG 导入为 React 组件？有一个 Vite 插件可以做到这一点。使用 tsconfig 路径别名？Vite 插件。更喜欢使用 Vanilla Extract？Vite 插件。想要使用 MDX？与 Vite 兼容的 Rollup 插件。需要自定义的东西吗？编写您自己的插件！

以下是在使用 Remix Vite 插件时可以获得的更多优势

近乎即时的开发启动。Vite 按需延迟编译您的应用程序代码，因此开发服务器可以立即启动。
预捆绑的依赖项。Vite 只处理一次依赖项，因此诸如 Material UI 和 AntD 之类的庞大库不会成为重建或热更新的瓶颈。
增量热更新。Vite 会跟踪依赖项，因此它只需要重新处理依赖于更改的应用程序代码。
显着降低内存使用量。Vite 了解 import 语句，并且可以有效地使服务器上过时的模块失效，而无需依赖内存占用大的技巧来绕过 import 缓存。这应该会消除开发过程中存在的内存不足错误。
自动基于路由的 CSS 拆分。Vite 的 CSS 拆分只加载当前页面所需的样式。
在 HMR 期间更好地保留浏览器状态。Vite 内置的 HMR 运行时和错误覆盖层确保即使在存在服务器错误的情况下，浏览器状态也能保持完整。
自动热服务器更新。影响服务器的代码更改将立即反映在正在运行的服务器中，无需重新启动，也无需任何 global 技巧
ESM 和 CJS 交互操作。您编写 ESM，Vite 输出 ESM。您的依赖项可以是 ESM 或 CJS。Vite 处理其余工作。
所有文件的 TypeScript。项目根目录中不再需要 .js 或 .mjs 文件。使用 vite.config.ts，甚至可以通过 tsx server.ts 或 node --loader tsm server.ts 运行自定义服务器。
工作区。改进了单仓库的 workspace 兼容性。与 Vite 支持的任何包管理器一起使用：npm、yarn、pnpm 等。
浏览器兼容性目标。使用 Vite 的 build.target 或获取 browserslist 支持的插件.

为什么现在？

让我们从头开始。为什么 Remix 最初没有使用 Vite？简而言之，当时还没有发布稳定版本的 Vite！

Remix 的开发始于 2020 年 7 月，但 Vite 的第一个稳定版本直到 2021 年 2 月才发布。即使到了那时，也存在三个阻碍采用 Vite 的因素

稳定的 SSR 支持
非 Node 运行时支持（Deno、Cloudflare）
服务器感知的全栈 HMR

与此同时，Remix 编译器在 2021 年 3 月从 Rollup 切换到 esbuild。

在 2022 年 7 月，Vite 稳定了 SSR 支持，仅仅几个月后，在 2022 年 9 月，Deno 变得与 Vite 兼容。取得了一些进展，但 Vite 仍然缺少 Cloudflare 支持和服务器感知的 HMR。

与此同时，在 2022 年底，我们专注于帮助用户从 Create React App 和 Webpack 迁移到 Remix。然后，在 2023 年 3 月，React 停止推荐 CRA，并正式推荐全栈框架，包括 Remix。我们从 2023 年开始，准备解决服务器感知的 HMR 问题，并在 2023 年 5 月，我们最终使用热数据重新验证解决了这个问题。

此时，Remix 团队的一半人都在致力于对填充程序进行编译器改进和优化重建。对于许多用户来说，主要的瓶颈是重新处理诸如 Material UI 和 AntD 之类的庞大组件库，因此我们开始研究预捆绑依赖项。在对解决方案进行原型设计时，我们意识到我们需要从头开始重新实现模块缓存、依赖项跟踪和转换管道，这是在 esbuild 的低级插件系统之上。简而言之，我们实际上是在构建一个比 Vite 更糟糕的版本。因此，在 2023 年 6 月，我们开始为 Remix 制作 Vite 插件的原型。

这使得 Vite 中的 Cloudflare 支持成为最后一个缺失的部分。今天，我们直接与 CF 核心团队合作，并有信心能够在 Remix Vite 插件稳定之前提供一流的 CF 支持。

我们很乐意收到您的反馈

俗话说得好：如果您的不稳定版本没有 bug，说明您发布得太晚了。😅 但是说真的，我们想听听您的意见。

我们有一些已知问题，因此请务必查看这些问题（包括已解决和未解决的问题），然后再提交错误报告。它是否按预期工作？是否缺少什么？您觉得迁移指南有帮助吗？请告诉我们！

感谢 Vite！

我们的用户说，Remix 使 Web 开发再次变得有趣。对我们来说，Vite 使框架开发再次变得有趣。我们很高兴加入广泛而友好的 Vite 生态系统，并自豪地宣布 Remix 和 Shopify 现在将赞助 Vite！

Vite 是一个很棒的项目，我们感谢 Vite 团队的辛勤工作。特别感谢 Vite 团队的 Matias Capeletto (patak)、Arnaud Barré 和 Bjorn Lu 提供的指导。

Remix 社区迅速探索了对 Vite 的支持，我们感谢他们的贡献

最后，我们从其他框架如何实现 Vite 支持中获得了启发

为什么现在？

我们很乐意收到您的反馈

感谢 Vite！

获取有关最新 Remix 新闻的更新