【译】Remix❤️Vite

Remix❤️Vite

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

现在就尝试一下吧！

 # 最小服务器

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

 # 自定义 Express 服务器

 npx create-remix@latest --template remix-run/remix/templates/unstable-vite-express

查看新的如何将 Vite 与 Remix 结合使用的文档

那么闪电般的速度⚡️有多快？ 好吧，我们使用 M1 Max MacBook Pro 对 Indie Stack 进行了一些快速测试，结果如下：

• HMR 速度提高 10 倍
• 速度提高 5 倍 HDR

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

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

 // vite.config.ts

 从“@remix-run/dev”导入{unstable_vitePlugin as remix}；

 从“vite”导入{defineConfig}；

 导出默认的defineConfig({

   插件：[混音（）]，

 });

有了这个，您还可以访问 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 运行时和错误覆盖确保即使在服务器出现错误的情况下浏览器状态也保持不变。
• 自动热服务器更新。 影响服务器的代码更改会立即反映在您正在运行的服务器中，无需重新启动，也无需任何[全局技巧](https://remix.run/docs/en/main/guides /手动模式#跨重建保持内存中服务器状态）
• ESM 和 CJS 互操作。 您编写 ESM，Vite 输出 ESM。 您的依赖项可以是 ESM 或 CJS。 剩下的事情由 Vite 处理。
• 适用于所有文件的 TypeScript。 项目根目录不再需要“.js”或“.mjs”文件。 使用“vite.config.ts”，甚至通过“tsx server.ts”或“node --loader tsm server.ts”运行自定义服务器。
• 工作区。 改进了 monorepos 的工作区兼容性。 与 Vite 支持的任何包管理器一起使用：npm、yarn、pnpm 等。
• 浏览器兼容性目标。 使用 Vite 的 build.target 或获取 [浏览器列表支持插件](https /github.com/marcofugaro/browserslist-to-esbuild）。

＃＃ 为什么现在？

让我们从头开始。 为什么 Remix 一开始不使用 Vite？ 简而言之，Vite 的稳定版本还不存在！

Remix 开发开始于 2020 年 7 月，但是 [Vite 的第一个稳定版本](https://github.com/vitejs/vite/issues/ 1207）直到 2021 年 2 月。 即便如此，采用 Vite 仍存在三个障碍：

1.稳定的SSR支持
2. 非 Node 运行时支持（Deno、CloudFlare）
3. 服务器感知、全栈 HMR

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

[2022 年 7 月](https://github.com/vitejs/vite/pull/8987），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 的低级插件系统](https://esbuild.github.io/plugins/#plugin- API 限制）。 简而言之，我们实际上正在构建一个更糟糕的 Vite 版本。 因此，在 2023 年 6 月，我们开始为 Remix 制作 Vite 插件原型。

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

我们希望收到您的反馈

你知道他们怎么说：如果你的不稳定版本没有错误，那么你发布得太晚了。 但说实话，我们希望收到您的来信。

我们有几个已知问题，所以请务必查看这些 ( 在提交错误报告之前，打开和关闭）。 它按照您期望的方式工作吗？ 有什么遗漏吗？ 您觉得迁移指南 有帮助吗？ 让我们知道！

谢谢维特！

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

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

Remix 社区很快就寻求 Vite 支持，我们感谢他们的贡献：

• 讨论：考虑使用Vite
• remix-kit
• remix-vite
• vite-plugin-remix

最后，我们受到其他框架如何实现 Vite 支持的启发：

• Astro
• SolidStart
• SvelteKit