When we started react.email, the idea was to make modern web development tooling, like Tailwind CSS, available for the email ecosystem.
But for some time, the <Tailwind /> component had a few problems, leading users to go back into using inline styles. This is not the experience we wanted for developers.
That's why we're excited to announce a major performance improvement. The render time for Tailwind emails is now 23x faster.
These are numbers from benchmarks on real-world email templates.
We used the Tinybench library to run the tests. The tests were run on a Linux machine with a 3.6 GHz 6-core AMD Ryzen 5 4500 CPU and 16 GB 3600 MHz DDR4 memory.
The sample size was 100 email renders for each test, and the same email template was used for all the tests. The results are in nanoseconds per operation.
Here are the results before the performance improvements:
And here are the results after the performance improvements:
We can see that the p99 is 23x faster, and the p75 is 26x faster.
The greatest point of performance degradation that we had before was with the way we ran Tailwind to generate the styles for classes. Every time the component would come across a className, it would start tailwind alongside postcss, which was unnecessary.
To fix this, we changed the component to render the whole React element tree. Then, we ran Tailwind on it to know which inline styles to substitute for each class name.
We then created a map of the inline styles associated with the class names as keys. After that, we added these inline styles from the map to each element that uses these class names. This means the second traversal grows linearly instead of exponentially.
1. Upgrade package versions
If you are importing the Tailwind component from @react-email/components you can update it to version 0.0.12.
Or if you are importing it directly from @react-email/tailwind you can update it to version 0.0.13.
2. Change component order if you use media queries
If you are using Tailwind classes that renders into media queries like dark mode, you'll have to change the order in which the components are defined.
You need to move the Tailwind component from wrapping the <Html /> component followed by the <Head /> component to just directly wrapping the <Head /> component.
If you want to know more about this update, including technical details, and stability improvements, check the React Email Changelog.
If you have any problems upgrading, feel free to share on GitHub or X.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。