下一代电子邮件构建工具：React Email 2.0 正式发布，性能大幅提升！
今天是坚持日更的第141天，如果文本对您有帮助，点击关注、点赞、在看支持我
电子邮件是人们沟通的重要媒介。但是，我们不能再像 2010 年那样开发电子邮件，而应重新思考 2024 年及以后如何开发电子邮件。电子邮件开发需要革新，以适应我们今天构建 Web 应用的方式。
React Email 使用 React 和 TypeScript 构建和发送电子邮件，它有一组标准化组件集，可帮助您构建令人惊叹的电子邮件，无需处理创建基于表格的布局和维护过时的标记的混乱。如 HTML、Container、Button、Text 等组件。所有组件都经过了使用最流行的电子邮件客户端（Gmail、Apple mail、Outlook等）进行测试。
React Email 可以与任何电子邮件服务提供商一起使用，您只需要将使用 React 创建的组件转换为 HTML 字符串，这些可以通过使用渲染实用程序来完成。
React Email 现在在 npm 上每周下载量为 114,583 次，并在 GitHub 上获得了 10,924 star。
近日，React Email 2.0 正式发布，主要特性如下：
重新设计的预览体验 性能大幅提升 新的组件 部署到 Vercel 更好地支持 monorepos
1.重新设计的预览体验
预览服务器是 React Email 体验的核心。它可以让您在浏览器中查看模板，而无需发送大量真实邮件。它能大大加快反馈周期，提供更好的开发者体验。这就是为什么我们决定从头开始重新设计它。
全新的移动预览
现在您可以在小屏幕上查看电子邮件的外观，而无需调整浏览器窗口大小或打开开发者工具.
全新的文件树
文件树现在支持子目录，因此您可以任意组织电子邮件。您还可以隐藏文件树以获得更多的邮箱预览空间。
更好的用户反馈
新的预览服务器将在您发送测试邮件后向您显示一条消息。
改进的错误处理
新的预览服务器将在出现问题时向您显示一条消息，因此您不必猜测发生了什么。
2.性能大幅提升
对开发者体验产生真正影响的一点是您能够快速安装和启动。旧版本的 React Email(1.10.1)和新版本(2.0.0)的性能对比，结果是让人震惊的。
在对全新安装的本地服务器启动时间进行测试时，旧版本需要进行所有运行的测试大约40秒，而新版本最多只需要7秒。一旦完成了初始设置，您将看到更快的启动时间，大约为1秒。
这些测试是在 Linux 机器上进行的，配置为 3.6 GHz 6 核 AMD Ryzen 5 4500 CPU，16 GB 3600 MHz DDR4 内存，下载速度约为 114 mbit/s。这些测试是基于用户在删除.react-email和.next文件夹后首次体验的情况进行的。
更少的等待下载和安装时间，意味着更多的时间用于实际工作。
3.全新组件
我们一直讨厌的一件事是看到代码显示为图像而不是实际文本。这不仅令人讨厌，而且也不易访问。您无法复制代码，也无法进行搜索。
在处理电子邮件时，我们经常看到这种情况发生。这就是为什么我们决定在 React Email 中添加新组件，以便更容易地在电子邮件中显示代码。
代码块
使用新的 code-block 组件，您可以使用 Prism.js 提供的选择主题和语法高亮功能渲染代码。
import { CodeBlock, dracula } from '@react-email/components';
const Email = () => {
const code = `{
max-width: 80vh;
width: 100%;
}`;
return (
<CodeBlock
code={code}
lineNumbers
theme={dracula}
language="css"
/>
);
};
内联代码
使用新的 code-inline 组件，您可以在所有电子邮件客户端上显示可预测的内联代码 HTML 元素。
import { CodeInline } from "@react-email/components";
const Email = () => {
return (
<p>Use <CodeInline>transform</CodeInline> and <CodeInline>opacity</CodeInline> in CSS for 60fps animations.</p>
);
};
4.部署到 Vercel 和其他平台
2.0 版本能够直接将 React Email 预览部署到 Vercel。与之前的版本相比，这个新版本使得部署变得更加容易，不仅限于 Vercel，任何云服务提供商都可以部署。
以下是将您的 React Email 应用程序部署到 Vercel 的步骤：
在./package.json中添加“build”脚本
{
"scripts": {
"build": "email build"
}
}
在 Vercel 的项目设置中更改 “Framework Preset” 为 Next.js 将 “Output Directory” 更改为 .react-email/.next
最后，您的设置应该如下所示：
这将启用对生产和预览 URL 的部署。
5.更好的 Monorepos 支持
React Email 现在与 turborepo、npm、bun、pnpm 和 yarn 工作区兼容。
不再需要下载，不再需要安装包管理器。
为了解决这个问题，现在在电子邮件上运行 esbuild。这样就可以进行捆绑，带来已安装的依赖项，使渲染行为更可预测。这也意味着，如果你在 monorepo 上使用了其他软件包中的代码，预览时也会毫不费力地将其带入。
以前，我们会将预览版客户端放在 repo 上，然后根据版本标签下载。现在，一旦你在全球范围内安装 CLI，它就会与预览版客户端一起开箱即用。
6.快速升级
将你的 react-email 软件包更新到 2.0.0，npm i react-email@latest。将 @react-email/components 软件包更新至 0.0.14。npm i @react-email/components@latest。
大家都在看