#42436·dify

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

Author: hyobanCreated Sep 17, 2026Updated Sep 17, 2026
Labelsproject#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.