【译】Remix❤️Vite

最新推荐文章于 2024-11-12 11:19:19 发布

sanbaofengs

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量160

点赞数

分类专栏：经验分享文章标签： javascript

经验分享专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Remixv2.2.0开始支持Vite，带来更快的开发速度、HMR优化和更好的库管理。Vite的特性如预编译、增量更新和轻量级架构使得Remix变得更高效。团队解决了早期迁移挑战，期待用户反馈和持续改进。

摘要由CSDN通过智能技术生成

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 支持。