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

查看新的关于如何将 Vite 与 Remix 一起使用的文档

那么闪电般快速 ⚡️ 有多快？嗯，我们在配备 M1 Max MacBook Pro 的Indie Stack 上进行了一些快速测试，以下是我们发现的结果

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 运行您的自定义服务器。
工作区。 改进了对 monorepo 的工作区兼容性。与 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 团队的一半人都在埋头改进编译器的 polyfill 和优化重建。对于许多用户来说，主要的瓶颈是重新处理像 Material UI 和 AntD 这样的大型组件库，因此我们开始研究预先捆绑依赖项。在原型设计解决方案时，我们意识到我们需要在 esbuild 的底层插件系统之上从头开始重新实现模块缓存、依赖项跟踪和转换流水线。简而言之，我们实际上是在构建一个更糟糕的 Vite 版本。因此，在 2023 年 6 月，我们开始为 Remix 原型设计一个 Vite 插件。

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

我们很乐意听取您的反馈

俗话说：如果你的不稳定版本没有错误，那么你发布得太晚了。😅 但说真的，我们想听取您的意见。

我们有一些已知问题，因此在提交错误报告之前，请务必查看这些问题（包括已打开和已关闭的问题）。它的工作方式是否符合您的预期？有什么遗漏吗？您觉得迁移指南有帮助吗？请告诉我们！

感谢 Vite！

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

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

Remix 社区很快就开始探索 Vite 支持，我们感谢他们的贡献

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

为什么是现在？

我们很乐意听取您的反馈

感谢 Vite！

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