perf: sohbet markdown lazy + marked client'tan çıktı, mermaid görünürlükte (Faz 4)

- markdown.tsx: blok bölme marked.lexer yerine çit-farkındalıklı boş satır
  bölücüsü — react-markdown'ın yanında ikinci tam parser (~460 KB paket)
  client'a inmiyordu artık gerekmiyor; memoized blok yapısı aynen korunur
- markdown-lazy: react-markdown+remark zinciri (~215 KB) lazy; fallback
  aynı class'lı düz metin (stream'de flash/CLS yok), sohbet mount'unda
  preloadMarkdown ile chunk önden ısınır — /listem 1315->1133 KB eager JS
- el-cizimi-sema: mermaid importu IntersectionObserver'a bağlandı
  (rootMargin 200px); şemalar hep fold altında, ~1 MB mount'ta inmiyor

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-08-08 14:01:48 +03:00
parent b7e10efd1d
commit 90ac590737
5 changed files with 110 additions and 27 deletions

View File

@@ -1,5 +1,4 @@
import { cn } from "@/lib/utils"
import { marked } from "marked"
import { memo, useId, useMemo } from "react"
import ReactMarkdown, { Components } from "react-markdown"
import remarkBreaks from "remark-breaks"
@@ -13,9 +12,27 @@ export type MarkdownProps = {
components?: Partial<Components>
}
// Stream memoization'ı için bloklara bölme. Eskiden marked.lexer yapıyordu —
// react-markdown'ın micromark'ına ek ikinci bir tam parser'ı (~460 KB paket)
// client'a taşımak blok bölmek için gereksiz: kod çiti dışındaki boş satırlar
// zaten markdown'da blok sınırıdır. Çit içi boş satırlar korunur.
function parseMarkdownIntoBlocks(markdown: string): string[] {
const tokens = marked.lexer(markdown)
return tokens.map((token) => token.raw)
const bloklar: string[] = []
let mevcut: string[] = []
let citte = false
for (const satir of markdown.split("\n")) {
if (/^\s*(```|~~~)/.test(satir)) citte = !citte
if (!citte && satir.trim() === "") {
if (mevcut.length) {
bloklar.push(mevcut.join("\n"))
mevcut = []
}
} else {
mevcut.push(satir)
}
}
if (mevcut.length) bloklar.push(mevcut.join("\n"))
return bloklar.length ? bloklar : [markdown]
}
function extractLanguage(className?: string): string {