[Refactor/Chore] Lazy-load ECharts and ABC music renderers by Markdown code-block language

未关闭
#42,436 0 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
48/100
Issue 类型
重构
描述清晰度
基本清楚
活跃度
活跃
技术栈
react, typescript

调研方向

Start with web/app/components/base/markdown-blocks/code-block.tsx and music.tsx, then inspect the Markdown wrapper's existing dynamic loading. Verify plain, echarts, and abc fences in development and production, including streaming, theme/resize, audio, and error behavior; update focused tests and record before/after bundle evidence.

由索引模型根据 Issue 内容生成。

描述

project#dify
Self Checks
  • I have read the Contributing Guide and Language Policy.
  • This is only for refactors or chores; questions belong in Discussions.
  • I have searched for existing issues, including closed ones.
  • I confirm that I am using English to submit this report.
  • 【中文用户 & Non English User】请使用英语提交,否则会被关闭 :)
  • I have filled in the required template fields.
Description

web/app/components/base/markdown-blocks/code-block.tsx statically imports echarts-for-react and music.tsx. web/app/components/base/markdown-blocks/music.tsx statically imports abcjs and its audio CSS.

The outer code-block component is already dynamically loaded by the Markdown wrapper. However, loading it for an ordinary code fence also brings in the special chart/music renderers, even when the content contains no echarts or abc fence.

Local build evidence:

Chunk Uncompressed Estimated gzip
ECharts shared chunk (ECharts, zrender, React adapter) 1,132,306 B 371,226 B
code-block chunk (includes 152 abcjs modules plus other functionality) 719,834 B 211,585 B

Load the specialized renderer when its corresponding language is rendered, with suitable loading/error behavior. Keep the full ECharts capabilities needed by user-provided chart options; trimming chart registrations is a separate compatibility decision.

Motivation

Plain code fences should not require chart and music runtimes. The static dependency closure of the code-block boundary is currently approximately 3.41 MB (1.05 MB gzip), including shared dependencies; this is not a page first-load measurement.

Acceptance criteria:

  • In an isolated plain-code-block scenario, no ECharts or abcjs runtime is loaded solely because the generic code-block component is rendered.
  • echarts and abc fences load their respective renderer on demand and still support streaming updates, theme/resize behavior, audio controls and error handling.
  • Verify both development and production loading behavior and update focused tests.
  • Provide before/after bundle evidence. Other chart-consuming pages can still load shared chart chunks independently.
Additional Context

Measurements come from a local Dify 1.17.1 development checkout (base commit 06e473015a9a1abb71da88ac0a0e92d96a992008, with local DevTools integration patches), using Vinext 1.0.0-beta.10 / Vite+ core 0.3.2 / Node 24.21.0. They are a diagnostic baseline, not a benchmark of an unmodified main checkout or a production network measurement. Related background: #30931 (closed).

Static dependency totals below follow manifest imports recursively, deduplicate files, and exclude dynamic imports, CSS, images and fonts. Gzip values are summed per-file estimates. Shared closures overlap and must not be added together.

主要语言
TypeScript
星标
157k
派生
24.7k
平均合并
22 小时 32 分钟
30 天内合并 PR
611

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

langgenius/dify 的其他 Issue

查看 langgenius/dify 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。