[Refactor/Chore] Lazy-load ECharts and ABC music renderers by Markdown code-block language
还没有人认领这个 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 内容生成。
描述
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.
echartsandabcfences 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
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
langgenius/dify 的其他 Issue
-
Annotation Reply: a stored score threshold of 0.0 is silently replaced with 1, disabling the feature 未关闭
难度 2/5 1-3 小时 新手友好度 88/100
langgenius/dify#42639 · 1 条评论 · 1 个 reaction ·
-
难度 2/5 1-3 小时 新手友好度 70/100
langgenius/dify#42468 · 1 条评论 · 1 个 reaction ·
-
🐞 bug
难度 2/5 1-3 小时 新手友好度 86/100
langgenius/dify#42446 · 1 个 reaction ·
-
难度 2/5 1-3 小时 新手友好度 88/100
langgenius/dify#42355 · 1 条评论 · 1 个 reaction ·
-
难度 2/5 1-3 小时 新手友好度 88/100
langgenius/dify#42350 · 1 条评论 · 1 个 reaction ·
相似的 Issue
-
calcite-components needs triage refactor
难度 2/5 1-3 小时 新手友好度 75/100
Esri/calcite-design-system#15203 ·
-
难度 2/5 1-3 小时 新手友好度 91/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
难度 1/5 1 小时以内 新手友好度 95/100
-
难度 2/5 1-3 小时 新手友好度 78/100
Automattic/studio#4908 ·
-
难度 2/5 1-3 小时 新手友好度 90/100