[Refactor/Chore] Lazy-load ECharts and ABC music renderers by Markdown code-block language
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.
Source: langgenius/dify