Bundle Size very large

[brandon-pereira]

Describe the Bug

The bundle size of our app increased by ~500 MB when we installed react-email. The reason for this is that the react-email package requires several large dependencies like next and framer-motion.

While it makes sense that these are required for the dev tools/build tools, they shouldn't be included if I make react-email a devDependency and keep @react-email/components a depenency.

The reason that react-email is still installed even when moving it to a devDependency is that @react-email/markdown has a dependency on md-to-react-email: 4.1.0 (here). The 4.x version of md-to-react-email has a peer dependency on react-email. Unfortunately, with yarn there is no way to ignore peer dependencies entirely, even when running with --production flag.

Solution

If the package @react-email/markdown bumps its dependency md-to-react-email to 5.x then the issue will be resolved because it is no longer listed as a peer dependency..

References

• Relevant Upstream Issue
• Existing Issue from Renovate

Which package is affected (leave empty if unsure)

@react-email/components

Link to the code that reproduces this issue

https://github.com/codeskills-dev/md-to-react-email/blob/v4.1.0/package.json#L50C1-L50C28

To Reproduce

1. Install @react-email/components as a dependency in a new project
2. Install dependencies via yarn install
3. Check if react-email was installed via yarn why react-email
4. Assert that react-email is installed

Expected Behavior

1. Install @react-email/components as a dependency in a new project
2. Install dependencies via yarn install
3. Check if react-email was installed via yarn why react-email
4. Assert that react-email is NOT installed

What's your node version? (if relevant)

20.10.0

[gabrielmfern]

Thank you so much for opening this issue, really good information throughout. Going to get that fixed for the next versions of @react-email/markdown and @react-email/components.

[hilja]

My docker image size doubled from 477MB to 1Gig and it took some head scratching to figure out what caused it. But I just downgraded to 0.0.14 and all is fine.

Seems like it changed a lot of big deps to prod deps. Please do a hotfix release.

[gabrielmfern]

@hilja

Seems like it changed a lot of big deps to prod deps. Please do a hotfix release.

I do remember we changed them on the package for the CLI, but not on any of the components. Do you have any idea which package had these changes you mentioned?

[hilja]

In the end I installed only the components that I needed instead of components, which made my image 10MB smaller.

[nicitaacom]

Here I better describe this issue (this issue impact on performance)

https://github.com/resend/react-email/issues/1340#event-12001551749

[nicitaacom]

In the end I installed only the components that I needed instead of components, which made my image 10MB smaller.

That's great!

Can you please share steps other need to do to achieve your result?

[gabrielmfern]

Fixed and released under @react-email/components@0.0.16-canary.0 and @react-email/markdown@0.0.9-canary.0.

Bundle sizes should be much smaller with those two now. Let me know if this is still here on the canary.

[brandon-pereira]

@gabrielmfern I see a significantly reduced build time and container size after upgrading to @react-email/components@0.0.16-canary.0. Went from 94 seconds to install down to 52 seconds. (Your mileage may vary of course).

Appreciate the quick turnaround on this feature, nice work 🙏

[hilja]

Can you please share steps other need to do to achieve your result?

Uninstall components pnpm remove @react-email/components and add only what you need, for me it was:

pnpm add @react-email/container @react-email/html @react-email/link @react-email/text @react-email/render

Then use in normal fashion:

import { Container } from '@react-email/container'
import { Html } from '@react-email/html'
import { Link } from '@react-email/link'
import { Text } from '@react-email/text'
import { renderAsync } from '@react-email/render'

Slightly faster build and smaller final image :)

This bug was actually a blessing in disguise, it triggered me to look into the final image size and I went from 479 MB to 254 MB by being smarter about what I include.

[nicitaacom]

This bug was actually a blessing in disguise, it triggered me to look into the final image size and I went from 479 MB to 254 MB by being smarter about what I include.

Where are you checking this 479 and 254 MB (and its size of what? of image?)

I creted the same issue and size that I see in kB https://github.com/resend/react-email/issues/1340