Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Translated client components would add about 12 KB of JavaScript to their pages

Aperta
  • Qualcosa non va?
#624 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
45/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
next.js, typescript
Ambito
frontend, performance

Direzione di ricerca

Read the createNextIntlPlugin setup added in #620 and the message catalog checks in #623 first. Configure experimental message precompilation, then verify argument rendering in a server component and test client component with pnpm build && pnpm start. Check that pnpm budgets is unchanged and run the listed lint, typecheck, knip, and test commands.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement pipeline:proposed

Needs your OK: this turns on next-intl's experimental message precompiling, so a translated client component costs about 3 KB instead of about 12 KB. Nothing anyone sees changes. Swap pipeline:proposed for pipeline:ready to have it built.

What happens

The first client component to show translated text (the sign-up dialog, a later step in #619) would ship next-intl's runtime with its ICU parser: 11.6 KB gzipped, measured. /s/[slug] is budgeted at 132 KB and kept within about 2 KB of its real size. With experimental.messages.precompile, messages are compiled at build time and the runtime drops to 2.8 KB. In a real Next build with one translated client component, /s/[slug]'s page chunk grew by 3.5 KB.

Fix, in outline

  • In the createNextIntlPlugin options, set experimental.messages to path: './src/messages', format: 'json', locales: 'infer' and precompile: true.
  • Import catalogs only as modules, never read them with fs in web code. The plugin's loader compiles what's imported, and a message that skips it loses its arguments silently in the web process.
  • Land it before any client component uses translations, so none ever ships the full runtime.

Watch for

  • Two formatters run in production. Inside the Next build every translator, server and client, formats precompiled messages; the worker and vitest format raw JSON with use-intl's full formatter. The guards: the catalog check compiles every message (#623), src/email/templates/worker-render.test.ts renders emails under the worker toolchain, and the first participant text step adds a production-build e2e that renders a message with arguments.
  • Turbopack: the catalog loader needs Next 16 there. pnpm dev uses webpack on 15.5, so leave it that way.
  • It's experimental, so pin next-intl to an exact version. If it misbehaves, turning it off costs about 9 KB on the participant pages, and that budget raise needs its reason in the PR.

Order

After #620, because it configures the plugin #620 adds.

Done when

  • A server component and a test client component both render a message with arguments correctly in pnpm build && pnpm start.
  • pnpm budgets is unchanged.
  • pnpm lint && pnpm typecheck && pnpm knip && pnpm test pass.

Planned with the owner in https://claude.ai/code/session_01EFKmj716ZY3b3SwR8TV8Y2 and checked against the code on main at 35288fa. The full plan is private to the owner's account: https://claude.ai/artifact/VgQH6U2s2EVx3LX991fJi8 (a Claude session on that account can open it with the Artifact tool's read action). This is step 0.5 there.

Lingua principale
TypeScript
Stelle
19
Fork
4
Merge medio
21h 3m
PR unite (30g)
176

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di richshaw/OpenSignup

Tutte le issue di richshaw/OpenSignup

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.