render: Prettier is bundled even when `pretty` is never used

オープン
  • 何か問題がありますか？
#3,878 コメント 1 件 リアクション 1 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
48/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
活発
技術スタック
react, typescript, vite
領域
build-system, performance

調査の方向性

Start by tracing how render() handles the pretty option and how the package exports render and pretty; the issue names no source files or tests. Compare the proposed core entry point with removing the option in a major release, then check how each affects bundler output for the Vite SSR reproduction. Done means callers that never use pretty can avoid Prettier in their bundle while pretty formatting remains available.

索引モデルが issue の本文から書いたものです。

説明

Versions

react-email 6.11.8, @react-email/render 2.2.0, prettier 3.9.10

Problem

render() only uses Prettier when options.pretty is set, but because that branch reaches import("prettier/standalone"), bundlers have to include Prettier for every caller of render. The option is only known at runtime, so the import can't be tree-shaken.

In a Vite SSR build for Cloudflare Workers that never sets pretty, the Worker bundle gets two extra chunks:

Chunk Raw Gzip
prettier/standalone 103 KB 30 KB
prettier/plugins/html 197 KB 55 KB
Total 299 KB 85 KB

The code never runs, but it still counts toward the Worker's upload size.

Relation to #3608

#3608 asked to drop Prettier as a dependency, and I'm not asking for that. It's fine as a dependency, and these numbers match the 83 KB gzipped mentioned there. Using a bundler was the suggested fix, but the bundler is what can't remove it here.

To reproduce
import { render } from 'react-email';

export const getHtml = (body: React.ReactElement) => render(body);

Build this for SSR with Vite and look for standalone-*.js and html-*.js in the output.

Suggested fix

pretty is already a separate export and the package has "sideEffects": false, so the if (options?.pretty) branch in render is the only thing keeping Prettier in the graph. Either of these would let bundlers drop it:

  1. Add an entry point whose render has no pretty option, such as @react-email/render/core. This is non-breaking.
  2. Deprecate the option in favour of pretty(await render(element)), and remove it in the next major version.
主要言語
TypeScript
スター
19.9k
フォーク
1.1k
平均マージ
2日 15時間
マージ済み PR（30日）
61

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

resend/react-email のほかの issue

resend/react-email の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。